# design-system-ui

> A TanStack Start template for publishing a shadcn-compatible registry.

This site publishes shadcn-compatible registry items and authored documentation for design-system-ui. Use https://reactdocs.canceydejean.dev/llms-full.txt for one expanded context file containing the linked Markdown pages.

## Docs

- [Introduction](https://reactdocs.canceydejean.dev/docs.md): Copy-paste React utilities, hooks, and blocks installable with the shadcn CLI.
- [Installation](https://reactdocs.canceydejean.dev/docs/installation.md): Install Design System UI items with the shadcn CLI.
- [Registry](https://reactdocs.canceydejean.dev/docs/registry.md): Scaffold and author installable registry items under registry/items.
- [Styles](https://reactdocs.canceydejean.dev/docs/styles.md): Install the design system CSS foundation with the shadcn CLI.
- [Agents](https://reactdocs.canceydejean.dev/docs/agents.md): Give AI coding tools Markdown context for this registry.
- [Theming](https://reactdocs.canceydejean.dev/docs/theming.md): Apply your brand accents after installing the design system styles, including multi-brand palettes.
- [Changelog](https://reactdocs.canceydejean.dev/docs/changelog.md): Track user-facing changes to this registry.


## Components

- [Components index](https://reactdocs.canceydejean.dev/components.md): Installable UI primitives and components.
- [Accordion](https://reactdocs.canceydejean.dev/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://reactdocs.canceydejean.dev/components/alert.md): Displays a callout for user attention with optional title, description, and action.
- [Alert Dialog](https://reactdocs.canceydejean.dev/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://reactdocs.canceydejean.dev/components/aspect-ratio.md): Displays content within a desired aspect ratio.
- [Attachment](https://reactdocs.canceydejean.dev/components/attachment.md): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Avatar](https://reactdocs.canceydejean.dev/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://reactdocs.canceydejean.dev/components/badge.md): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://reactdocs.canceydejean.dev/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://reactdocs.canceydejean.dev/components/bubble.md): Colored message surfaces for chat and conversation UIs, with optional reactions.
- [Button](https://reactdocs.canceydejean.dev/components/button.md): A polymorphic button with variants, sizes, icons, and a CTA group helper.
- [Button Group](https://reactdocs.canceydejean.dev/components/button-group.md): A container that groups related buttons with shared borders and orientation.
- [Calendar](https://reactdocs.canceydejean.dev/components/calendar.md): A date field component that allows users to enter and edit dates.
- [Card](https://reactdocs.canceydejean.dev/components/card.md): Displays a card with header, content, and footer.
- [Carousel](https://reactdocs.canceydejean.dev/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Chart](https://reactdocs.canceydejean.dev/components/chart.md): Beautiful charts built using Recharts with a themed chart container, tooltip, and legend.
- [Checkbox](https://reactdocs.canceydejean.dev/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Collapsible](https://reactdocs.canceydejean.dev/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Combobox](https://reactdocs.canceydejean.dev/components/combobox.md): Autocomplete input with a list of suggestions.
- [Command](https://reactdocs.canceydejean.dev/components/command.md): Command menu for search and quick actions.
- [Container](https://reactdocs.canceydejean.dev/components/container.md): A centered content wrapper with max-width size variants.
- [Context Menu](https://reactdocs.canceydejean.dev/components/context-menu.md): Displays a menu of actions triggered by a right click.
- [Data Table](https://reactdocs.canceydejean.dev/components/data-table.md): Powerful table and datagrids built using TanStack Table.
- [Date Picker](https://reactdocs.canceydejean.dev/components/datepicker.md): A date picker component with range and presets.
- [Dialog](https://reactdocs.canceydejean.dev/components/dialog.md): A window overlaid on either the primary window or another dialog window.
- [Direction](https://reactdocs.canceydejean.dev/components/direction.md): A provider component that sets the text direction for your application.
- [Drawer](https://reactdocs.canceydejean.dev/components/drawer.md): A drawer component for menus and content that slides from an edge of the screen.
- [Dropdown Menu](https://reactdocs.canceydejean.dev/components/dropdown-menu.md): Displays a menu of actions or options triggered by a button.
- [Empty](https://reactdocs.canceydejean.dev/components/empty.md): Use the Empty component to display an empty state.
- [Field](https://reactdocs.canceydejean.dev/components/field.md): Combine labels, controls, descriptions, and errors into accessible form fields.
- [Heading](https://reactdocs.canceydejean.dev/components/heading.md): A semantic heading with independent size, weight, and tone controls.
- [Hover Card](https://reactdocs.canceydejean.dev/components/hover-card.md): For sighted users to preview content available behind a link.
- [Icons](https://reactdocs.canceydejean.dev/components/icons.md): A typed icon component with size variants and a custom icon set.
- [Input](https://reactdocs.canceydejean.dev/components/input.md): Displays a form input field or a component that looks like an input field.
- [Input Group](https://reactdocs.canceydejean.dev/components/input-group.md): Display additional information or actions to an input or textarea.
- [Input OTP](https://reactdocs.canceydejean.dev/components/input-otp.md): Accessible one-time password component with copy-paste support.
- [Item](https://reactdocs.canceydejean.dev/components/item.md): A versatile component for displaying content in lists, cards, or menus.
- [Kbd](https://reactdocs.canceydejean.dev/components/kbd.md): Used to display textual user input from keyboard.
- [Label](https://reactdocs.canceydejean.dev/components/label.md): Renders an accessible label associated with controls.
- [Link Spread](https://reactdocs.canceydejean.dev/components/link-spread.md): An absolute positioned anchor that makes an entire container clickable.
- [Link Text](https://reactdocs.canceydejean.dev/components/link-text.md): A polymorphic text link with tone, underline, size, and external-link controls.
- [Logos](https://reactdocs.canceydejean.dev/components/logos.md): A typed logo component with size variants and a brand logo set.
- [Marker](https://reactdocs.canceydejean.dev/components/marker.md): A marker for labeling sections with optional icons, borders, and separators.
- [Menubar](https://reactdocs.canceydejean.dev/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Message](https://reactdocs.canceydejean.dev/components/message.md): Layout primitives for chat rows with avatars, headers, and footers.
- [Message Scroller](https://reactdocs.canceydejean.dev/components/message-scroller.md): Auto-scrolling container for chat message lists with jump-to controls.
- [Native Select](https://reactdocs.canceydejean.dev/components/native-select.md): A styled native HTML select element with options and option groups.
- [Navigation Menu](https://reactdocs.canceydejean.dev/components/navigation-menu.md): A collection of links for navigating websites.
- [Pagination](https://reactdocs.canceydejean.dev/components/pagination.md): Pagination with page navigation, next and previous links.
- [Popover](https://reactdocs.canceydejean.dev/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://reactdocs.canceydejean.dev/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Questionnaire](https://reactdocs.canceydejean.dev/components/questionnaire.md): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
- [Radio Group](https://reactdocs.canceydejean.dev/components/radio-group.md): A set of checkable buttons where only one can be checked at a time.
- [Resizable](https://reactdocs.canceydejean.dev/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://reactdocs.canceydejean.dev/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Section](https://reactdocs.canceydejean.dev/components/section.md): A semantic section wrapper with responsive vertical padding variants.
- [Select](https://reactdocs.canceydejean.dev/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](https://reactdocs.canceydejean.dev/components/separator.md): Visually or semantically separates content.
- [Sheet](https://reactdocs.canceydejean.dev/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://reactdocs.canceydejean.dev/components/sidebar.md): A composable, themeable, and customizable sidebar component.
- [Skeleton](https://reactdocs.canceydejean.dev/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://reactdocs.canceydejean.dev/components/slider.md): An input where the user selects a value from within a given range.
- [Spinner](https://reactdocs.canceydejean.dev/components/spinner.md): An accessible loading spinner built on Lucide's Loader2 icon.
- [Switch](https://reactdocs.canceydejean.dev/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://reactdocs.canceydejean.dev/components/table.md): A responsive table component.
- [Tabs](https://reactdocs.canceydejean.dev/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Text](https://reactdocs.canceydejean.dev/components/text.md): A polymorphic body text component with size, weight, tone, and alignment controls.
- [Textarea](https://reactdocs.canceydejean.dev/components/textarea.md): Displays a multi-line text input field.
- [Toast](https://reactdocs.canceydejean.dev/components/toast.md): A succinct message that is displayed temporarily.
- [Toggle](https://reactdocs.canceydejean.dev/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://reactdocs.canceydejean.dev/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://reactdocs.canceydejean.dev/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.


## Blocks

- [Blocks index](https://reactdocs.canceydejean.dev/blocks.md): Composed templates and larger UI sections.
- [Announcement Bar](https://reactdocs.canceydejean.dev/blocks/announcement-bar.md): A full-width site banner with light, dark, and gray theme variants, plus an Embla carousel slider.
- [Hero](https://reactdocs.canceydejean.dev/blocks/hero.md): A full-bleed marketing hero with announcement badge, dual CTAs, and product screenshot.


## Utilities

- [Utilities index](https://reactdocs.canceydejean.dev/utilities.md): Hooks, libraries, pages, files, themes, fonts, bases, styles, and other items.
- [Mode Toggle](https://reactdocs.canceydejean.dev/utilities/mode-toggle.md): Cycles light, dark, and system theme modes and persists the choice.
- [scroll-fade](https://reactdocs.canceydejean.dev/utilities/scroll-fade.md): Utilities for adding a fade effect to the edges of a scroll container.
- [shimmer](https://reactdocs.canceydejean.dev/utilities/shimmer.md): Utilities for adding a shimmer effect to text elements.
- [Styles](https://reactdocs.canceydejean.dev/utilities/styles.md): Design system globals and theme CSS for consumer apps.
- [Theme Toggle](https://reactdocs.canceydejean.dev/utilities/theme-toggle.md): Switches between branded data-theme palettes and persists the choice.
- [useBodyOverflow](https://reactdocs.canceydejean.dev/utilities/use-body-overflow.md): Locks page scroll by toggling overflow-hidden on document.body.
- [useCloseMobileMenuOnResize](https://reactdocs.canceydejean.dev/utilities/use-close-mobile-menu-on-resize.md): Closes a mobile menu or overlay when the viewport is resized.
- [useCopyToClipboard](https://reactdocs.canceydejean.dev/utilities/use-copy-to-clipboard.md): A small hook that copies text and tracks the latest copy result.
- [useIsMobile](https://reactdocs.canceydejean.dev/utilities/use-mobile.md): Detects whether the viewport matches a mobile max-width media query.


## Optional

- [Registry JSON](https://reactdocs.canceydejean.dev/registry.json): Machine-readable shadcn registry index.