# Strongtie Design System

> Maintained, accessible React components delivered through the authenticated @strongtie/design-system package or the public Strongtie component registry.

## Install by Environment

- Authenticated Simpson projects: configure Azure Artifacts, then run `npm install @strongtie/design-system sonner`. Import components from `@strongtie/design-system/<component>`.
- No-auth cloud, sandbox, or external projects: configure the public `@strongtie` registry, then run `npx shadcn add @strongtie/button`.
- Do not edit package source in `node_modules`. Use application-owned wrappers for product behavior.
- [Package installation and Azure authentication](https://design.strongtie.io/getting-started/installation.md)
- [Public registry setup and complete catalog](https://design.strongtie.io/getting-started/strongtie-registry.md)

## AI and Implementation Guides

- [AI Agent Guide](https://design.strongtie.io/llm-guide.md): Resolve installation, framework, state, accessibility, and component rules
- [Design Standards](https://design.strongtie.io/design-standards.md): Required React application patterns
- [Design Standards Examples](https://design.strongtie.io/design-standards-examples.md): Package-based implementation templates
- [AGENTS.md Template](https://design.strongtie.io/templates/AGENTS_TEMPLATE.md): Repository instruction template

## Project Setup Guides

- [Code Quality Setup](https://design.strongtie.io/getting-started/eslint-setup.md): ESLint, Prettier, and Stylelint
- [Framework Recommendations](https://design.strongtie.io/framework-recommendations.md): Vite and Next.js decisions
- [shadcn → Package Codemod](https://design.strongtie.io/codemod.md): Automated migration from vendored shadcn/ui to the @strongtie/design-system package

## Key Constraints

- Use Vite for new React SPAs; request approval when Next.js is required.
- With React Compiler, do not add `useMemo`, `useCallback`, or `React.memo` without a measured need.
- Give icon-only buttons an accessible name and preserve keyboard focus behavior.

## Components

- [accordion](https://design.strongtie.io/components/accordion): Strongtie Accordion component.
- [alert](https://design.strongtie.io/components/alert): Strongtie Alert component.
- [alert-dialog](https://design.strongtie.io/components/alert-dialog): Strongtie Alert Dialog component.
- [aspect-ratio](https://design.strongtie.io/components/aspect-ratio): Strongtie Aspect Ratio component.
- [avatar](https://design.strongtie.io/components/avatar): Strongtie Avatar component.
- [badge](https://design.strongtie.io/components/badge): Strongtie Badge component.
- [breadcrumb](https://design.strongtie.io/components/breadcrumb): Strongtie Breadcrumb component.
- [button](https://design.strongtie.io/components/button): Strongtie Button component.
- [button-group](https://design.strongtie.io/components/button-group): Strongtie Button Group component.
- [calendar](https://design.strongtie.io/components/calendar): Strongtie Calendar component.
- [card](https://design.strongtie.io/components/card): Strongtie Card component.
- [carousel](https://design.strongtie.io/components/carousel): Strongtie Carousel component.
- [chart](https://design.strongtie.io/components/chart): Strongtie Chart component.
- [checkbox](https://design.strongtie.io/components/checkbox): Strongtie Checkbox component.
- [collapsible](https://design.strongtie.io/components/collapsible): Strongtie Collapsible component.
- [combobox](https://design.strongtie.io/components/combobox): A customizable combobox component with search and selection functionality.
- [command](https://design.strongtie.io/components/command): Strongtie Command component.
- [context-menu](https://design.strongtie.io/components/context-menu): Strongtie Context Menu component.
- [date-picker](https://design.strongtie.io/components/date-picker): A date picker component with calendar popover and input options.
- [dialog](https://design.strongtie.io/components/dialog): Strongtie Dialog component.
- [drawer](https://design.strongtie.io/components/drawer): Strongtie Drawer component.
- [dropdown-menu](https://design.strongtie.io/components/dropdown-menu): Strongtie Dropdown Menu component.
- [empty](https://design.strongtie.io/components/empty): Strongtie Empty component.
- [field](https://design.strongtie.io/components/field): Strongtie Field component.
- [form](https://design.strongtie.io/components/form): Strongtie Form component.
- [hover-card](https://design.strongtie.io/components/hover-card): Strongtie Hover Card component.
- [input](https://design.strongtie.io/components/input): Strongtie Input component.
- [input-group](https://design.strongtie.io/components/input-group): Strongtie Input Group component.
- [input-otp](https://design.strongtie.io/components/input-otp): Strongtie Input Otp component.
- [item](https://design.strongtie.io/components/item): Strongtie Item component.
- [kbd](https://design.strongtie.io/components/kbd): Strongtie Kbd component.
- [label](https://design.strongtie.io/components/label): Strongtie Label component.
- [menubar](https://design.strongtie.io/components/menubar): Strongtie Menubar component.
- [multi-select](https://design.strongtie.io/components/multi-select): A multi-select component with checkboxes and badge display.
- [navigation-menu](https://design.strongtie.io/components/navigation-menu): Strongtie Navigation Menu component.
- [pagination](https://design.strongtie.io/components/pagination): Strongtie Pagination component.
- [popover](https://design.strongtie.io/components/popover): Strongtie Popover component.
- [progress](https://design.strongtie.io/components/progress): Strongtie Progress component.
- [radio-group](https://design.strongtie.io/components/radio-group): Strongtie Radio Group component.
- [resizable](https://design.strongtie.io/components/resizable): Strongtie Resizable component.
- [scroll-area](https://design.strongtie.io/components/scroll-area): Strongtie Scroll Area component.
- [select](https://design.strongtie.io/components/select): Strongtie Select component.
- [separator](https://design.strongtie.io/components/separator): Strongtie Separator component.
- [sheet](https://design.strongtie.io/components/sheet): Strongtie Sheet component.
- [sidebar](https://design.strongtie.io/components/sidebar): Strongtie Sidebar component.
- [skeleton](https://design.strongtie.io/components/skeleton): Strongtie Skeleton component.
- [slider](https://design.strongtie.io/components/slider): Strongtie Slider component.
- [sonner](https://design.strongtie.io/components/sonner): Strongtie Sonner component.
- [spinner](https://design.strongtie.io/components/spinner): Strongtie Spinner component.
- [switch](https://design.strongtie.io/components/switch): Strongtie Switch component.
- [tab-nav](https://design.strongtie.io/components/tab-nav): [Deprecated] Use Tabs with TabsList variant='line' instead. A horizontal navigation component that displays links in a tab-like interface.
- [table](https://design.strongtie.io/components/table): Strongtie Table component.
- [tabs](https://design.strongtie.io/components/tabs): Strongtie Tabs component.
- [textarea](https://design.strongtie.io/components/textarea): Strongtie Textarea component.
- [toaster](https://design.strongtie.io/components/toaster): Strongtie Toaster component.
- [toggle](https://design.strongtie.io/components/toggle): Strongtie Toggle component.
- [toggle-group](https://design.strongtie.io/components/toggle-group): Strongtie Toggle Group component.
- [tooltip](https://design.strongtie.io/components/tooltip): Strongtie Tooltip component.
- [tree](https://design.strongtie.io/components/tree): A tree view component for displaying hierarchical data with expand/collapse functionality.

## Examples

- [Button Default](/blob/main/example/button-default.tsx): Example usage
- [Button Sizes](/blob/main/example/button-sizes.tsx): Example usage
- [Button Variants](/blob/main/example/button-variants.tsx): Example usage
- [Button With Icon](/blob/main/example/button-with-icon.tsx): Example usage
- [Badge Default](/blob/main/example/badge-default.tsx): Example usage
- [Badge Variants](/blob/main/example/badge-variants.tsx): Example usage
- [Skeleton Default](/blob/main/example/skeleton-default.tsx): Example usage
- [Skeleton Animations](/blob/main/example/skeleton-animations.tsx): Example usage
- [Input Default](/blob/main/example/input-default.tsx): Example usage
- [Input With Label](/blob/main/example/input-with-label.tsx): Example usage
- [Input Types](/blob/main/example/input-types.tsx): Example usage
- [Separator Default](/blob/main/example/separator-default.tsx): Example usage
- [Checkbox Default](/blob/main/example/checkbox-default.tsx): Example usage
- [Checkbox With Indeterminate](/blob/main/example/checkbox-indeterminate.tsx): Example usage
- [Switch Default](/blob/main/example/switch-default.tsx): Example usage
- [Switch With Label](/blob/main/example/switch-with-label.tsx): Example usage
- [Textarea Default](/blob/main/example/textarea-default.tsx): Example usage
- [Textarea With Label](/blob/main/example/textarea-with-label.tsx): Example usage
- [Progress Default](/blob/main/example/progress-default.tsx): Example usage
- [Slider Default](/blob/main/example/slider-default.tsx): Example usage
- [Card Default](/blob/main/example/card-default.tsx): Example usage
- [Card With Footer](/blob/main/example/card-with-footer.tsx): Example usage
- [Alert Default](/blob/main/example/alert-default.tsx): Example usage
- [Alert Destructive](/blob/main/example/alert-destructive.tsx): Example usage
- [Accordion Default](/blob/main/example/accordion-default.tsx): Example usage
- [Avatar With Fallback](/blob/main/example/avatar-with-fallback.tsx): Example usage
- [Tabs Default](/blob/main/example/tabs-default.tsx): Example usage
- [Tooltip Default](/blob/main/example/tooltip-default.tsx): Example usage
- [Dialog Default](/blob/main/example/dialog-default.tsx): Example usage
- [Dialog With Stacking](/blob/main/example/dialog-with-stacking.tsx): Example usage
- [Select Default](/blob/main/example/select-default.tsx): Example usage
- [Radio Group Default](/blob/main/example/radio-group-default.tsx): Example usage
- [Popover Default](/blob/main/example/popover-default.tsx): Example usage
- [Toggle Default](/blob/main/example/toggle-default.tsx): Example usage
- [Toggle With Text](/blob/main/example/toggle-with-text.tsx): Example usage
- [Dropdown Menu Default](/blob/main/example/dropdown-menu-default.tsx): Example usage
- [Breadcrumb Default](/blob/main/example/breadcrumb-default.tsx): Example usage
- [Collapsible Default](/blob/main/example/collapsible-default.tsx): Example usage
- [Table Default](/blob/main/example/table-default.tsx): Example usage
- [Hover Card Default](/blob/main/example/hover-card-default.tsx): Example usage
- [Scroll Area Default](/blob/main/example/scroll-area-default.tsx): Example usage
- [Label Default](/blob/main/example/label-default.tsx): Example usage
- [Carousel Default](/blob/main/example/carousel-default.tsx): Example usage
- [Pagination Default](/blob/main/example/pagination-default.tsx): Example usage
- [Context Menu Default](/blob/main/example/context-menu-default.tsx): Example usage
- [Menubar Default](/blob/main/example/menubar-default.tsx): Example usage
- [Drawer Default](/blob/main/example/drawer-default.tsx): Example usage
- [Calendar Default](/blob/main/example/calendar-default.tsx): Example usage
- [Date Picker Default](/blob/main/example/date-picker-default.tsx): Example usage
- [Sheet Default](/blob/main/example/sheet-default.tsx): Example usage
- [Toggle Group Default](/blob/main/example/toggle-group-default.tsx): Example usage
- [Alert Dialog Default](/blob/main/example/alert-dialog-default.tsx): Example usage
- [Avatar Default](/blob/main/example/avatar-default.tsx): Example usage
- [Combobox Default](/blob/main/example/combobox-default.tsx): Example usage
- [Combobox With Inline Search](/blob/main/example/combobox-with-inline-search.tsx): Example usage
- [Command Default](/blob/main/example/command-default.tsx): Example usage
- [Command Dialog](/blob/main/example/command-dialog.tsx): Example usage
- [Command With Groups](/blob/main/example/command-with-groups.tsx): Example usage
- [Command With Shortcuts](/blob/main/example/command-with-shortcuts.tsx): Example usage
- [Multi Select Default](/blob/main/example/multi-select-default.tsx): Example usage
- [Navigation Menu Default](/blob/main/example/navigation-menu-default.tsx): Example usage
- [Sidebar Default](/blob/main/example/sidebar-default.tsx): Example usage
- [Toaster Default](/blob/main/example/toaster-default.tsx): Example usage
- [Tree Default](/blob/main/example/tree-default.tsx): Example usage
- [Tree Custom Icons](/blob/main/example/tree-custom-icons.tsx): Example usage
- [Accordion Collapsible](/blob/main/example/accordion-collapsible.tsx): Example usage
- [Accordion Default Expanded](/blob/main/example/accordion-default-expanded.tsx): Example usage
- [Accordion Disabled](/blob/main/example/accordion-disabled.tsx): Example usage
- [Accordion Multiple](/blob/main/example/accordion-multiple.tsx): Example usage
- [Accordion Multiple Default Expanded](/blob/main/example/accordion-multiple-default-expanded.tsx): Example usage
- [Breadcrumb Custom Separator](/blob/main/example/breadcrumb-custom-separator.tsx): Example usage
- [Breadcrumb With Ellipsis](/blob/main/example/breadcrumb-with-ellipsis.tsx): Example usage
- [Button As Child](/blob/main/example/button-as-child.tsx): Example usage
- [Button Disabled](/blob/main/example/button-disabled.tsx): Example usage
- [Button Loading](/blob/main/example/button-loading.tsx): Example usage
- [Calendar Month And Year Selector](/blob/main/example/calendar-month-and-year-selector.tsx): Example usage
- [Calendar Range](/blob/main/example/calendar-range.tsx): Example usage
- [Card With Header](/blob/main/example/card-with-header.tsx): Example usage
- [Carousel Double](/blob/main/example/carousel-double.tsx): Example usage
- [Checkbox Checked](/blob/main/example/checkbox-checked.tsx): Example usage
- [Checkbox Default Checked](/blob/main/example/checkbox-default-checked.tsx): Example usage
- [Checkbox Disabled](/blob/main/example/checkbox-disabled.tsx): Example usage
- [Checkbox Disabled Checked](/blob/main/example/checkbox-disabled-checked.tsx): Example usage
- [Checkbox Group](/blob/main/example/checkbox-group.tsx): Example usage
- [Data Table Default](/blob/main/example/data-table-default.tsx): Example usage
- [Data Table With Sorting](/blob/main/example/data-table-with-sorting.tsx): Example usage
- [Data Table With Pagination](/blob/main/example/data-table-with-pagination.tsx): Example usage
- [Data Table With Filtering](/blob/main/example/data-table-with-filtering.tsx): Example usage
- [Data Table With Row Selection](/blob/main/example/data-table-with-row-selection.tsx): Example usage
- [Date Picker Button Variant](/blob/main/example/date-picker-button-variant.tsx): Example usage
- [Date Picker Date And Time](/blob/main/example/date-picker-date-and-time.tsx): Example usage
- [Dialog Alert](/blob/main/example/dialog-alert.tsx): Example usage
- [Dialog Long Content](/blob/main/example/dialog-long-content.tsx): Example usage
- [Dropdown Menu With Checkbox](/blob/main/example/dropdown-menu-with-checkbox.tsx): Example usage
- [Dropdown Menu With Radio Group](/blob/main/example/dropdown-menu-with-radio-group.tsx): Example usage
- [Input Disabled](/blob/main/example/input-disabled.tsx): Example usage
- [Multi Select With Icons](/blob/main/example/multi-select-with-icons.tsx): Example usage
- [Pagination Disabled Controls](/blob/main/example/pagination-disabled-controls.tsx): Example usage
- [Pagination With Ellipsis](/blob/main/example/pagination-with-ellipsis.tsx): Example usage
- [Radio Group Disabled](/blob/main/example/radio-group-disabled.tsx): Example usage
- [Radio Group With Form](/blob/main/example/radio-group-with-form.tsx): Example usage
- [Scroll Area Horizontal](/blob/main/example/scroll-area-horizontal.tsx): Example usage
- [Scroll Area Long Content](/blob/main/example/scroll-area-long-content.tsx): Example usage
- [Scroll Area With Nested Content](/blob/main/example/scroll-area-with-nested-content.tsx): Example usage
- [Select Controlled](/blob/main/example/select-controlled.tsx): Example usage
- [Select Custom Placeholder](/blob/main/example/select-custom-placeholder.tsx): Example usage
- [Select Disabled](/blob/main/example/select-disabled.tsx): Example usage
- [Select Form Integration](/blob/main/example/select-form-integration.tsx): Example usage
- [Select Scrollable List](/blob/main/example/select-scrollable-list.tsx): Example usage
- [Select Small Trigger](/blob/main/example/select-small-trigger.tsx): Example usage
- [Select With Groups](/blob/main/example/select-with-groups.tsx): Example usage
- [Sidebar Basic](/blob/main/example/sidebar-basic.tsx): Example usage
- [Slider Disabled](/blob/main/example/slider-disabled.tsx): Example usage
- [Table Large With Footer](/blob/main/example/table-large-with-footer.tsx): Example usage
- [Table Medium With Caption](/blob/main/example/table-medium-with-caption.tsx): Example usage
- [Table With Alignment](/blob/main/example/table-with-alignment.tsx): Example usage
- [Textarea Disabled](/blob/main/example/textarea-disabled.tsx): Example usage
- [Textarea With Form](/blob/main/example/textarea-with-form.tsx): Example usage
- [Toast Destructive](/blob/main/example/toast-destructive.tsx): Example usage
- [Toggle Icon](/blob/main/example/toggle-icon.tsx): Example usage
- [Chart Default](/blob/main/example/chart-default.tsx): Example usage
- [Empty Default](/blob/main/example/empty-default.tsx): Example usage
- [Field Default](/blob/main/example/field-default.tsx): Example usage
- [Input Group Default](/blob/main/example/input-group-default.tsx): Example usage
- [Item Default](/blob/main/example/item-default.tsx): Example usage
- [Kbd Default](/blob/main/example/kbd-default.tsx): Example usage
- [Tab Nav Default](/blob/main/example/tab-nav-default.tsx): Example usage
- [Tab Nav Disabled](/blob/main/example/tab-nav-disabled.tsx): Example usage
- [Tab Nav Tabs](/blob/main/example/tab-nav-tabs.tsx): Example usage

## Optional

- [Repository](): Source code and issues
- [Sitemap](https://design.strongtie.io/sitemap.xml): Indexable pages