# Desyne > Accessible React components built on React Aria Components and styled with Tailwind CSS v4 using shadcn/ui token names. Components are installed as source with the shadcn CLI from the @desyne registry; Desyne Pro adds licensed blocks and multi-page templates. Key conventions: - Install: `npx shadcn@latest add @desyne/` after adding `"@desyne": "/r/{name}.json"` to `registries` in components.json. - Components are React Aria components: use `onPress` (not `onClick`), `isDisabled`, `isRequired`, `isInvalid`, `selectedKey`/`onSelectionChange`. - Fields take `label`, `description` and `errorMessage`; wrap forms in React Aria's `
` for native validation and `validationErrors` for server errors. - Colors use a `color` prop (primary, brand, neutral, danger, success, warning, info). Sizes are sm (28px), md (32px, default), lg (40px). - Style states with data attributes: `data-hovered:`, `data-pressed:`, `data-focus-visible:`, `data-selected:`, `data-invalid:`. - Every page below is also available as Markdown by appending `.md` to its URL. ## Get started - [Introduction](https://desyne.dev/docs.md): Accessible React components built on React Aria, styled with shadcn tokens, installed as source you own. - [Installation](https://desyne.dev/docs/installation.md): Set up Desyne in a Next.js, Vite or existing shadcn project, in a monorepo, or by copying files by hand. - [CLI & registry](https://desyne.dev/docs/cli.md): How the @desyne namespace works, what the CLI writes, how to update components, and how to connect the private Pro registry. - [Project structure](https://desyne.dev/docs/project-structure.md): Where Desyne files land in your project, what each one does, and how to organise your own code around them. ## Foundations - [Theming](https://desyne.dev/docs/theming.md): shadcn token names, an ink primary with an indigo brand accent, color tones, radius and density, dark mode and multiple themes. - [Colors & tokens](https://desyne.dev/docs/colors.md): Every design token with its light and dark value, the Tailwind utilities it maps to, and the complete CSS to paste into a project. - [Typography](https://desyne.dev/docs/typography.md): Fonts, the text scale components use, and how to style headings and long-form content. - [Dark mode](https://desyne.dev/docs/dark-mode.md): Class-based dark mode with next-themes, a theme toggle, and how to preview or force a mode for part of a page. - [Icons](https://desyne.dev/docs/icons.md): Lucide icons by default, automatic sizing inside components, and labelling icon-only controls. - [Motion & reduced motion](https://desyne.dev/docs/motion.md): How overlays animate with React Aria's entering and exiting states, the animation utilities components use, and how reduced motion is respected. - [Accessibility](https://desyne.dev/docs/accessibility.md): What React Aria gives every component, the keyboard model, focus and screen reader behaviour, what you still own, and how to test it. - [Internationalisation](https://desyne.dev/docs/internationalization.md): Locales, right-to-left layouts, dates, times, numbers and calendars, all handled by React Aria's I18nProvider and @internationalized/date. ## Patterns - [Forms & validation](https://desyne.dev/docs/forms.md): Build forms with React Aria's Form, native and custom validation, server errors, Zod schemas and Next.js server actions. - [Data tables](https://desyne.dev/docs/data-tables.md): Build sortable, filterable, selectable and paginated tables with the Table component, React Aria's sort and selection state, and your own data logic. - [Overlays & focus management](https://desyne.dev/docs/overlays.md): Choose between Dialog, Sheet, Popover, Menu, Tooltip and Toast, open them from triggers or state, and keep focus where users expect it. - [Routing integration](https://desyne.dev/docs/routing.md): Connect React Aria links to Next.js, React Router or TanStack Router with RouterProvider, so client-side navigation works everywhere. - [Server components](https://desyne.dev/docs/server-components.md): Which components are server-safe, how client components fit into the App Router, and patterns for passing data and actions across the boundary. ## Pro - [What's in Pro](https://desyne.dev/docs/pro.md): Desyne Pro adds production-ready blocks and complete multi-page templates, built from the same open components. - [Installing blocks](https://desyne.dev/docs/pro/blocks.md): Browse blocks, connect the private registry with your license key, install with the shadcn CLI, and customise what lands in your project. - [Using templates](https://desyne.dev/docs/pro/templates.md): Download a Pro template as a standalone Next.js project, run it, rebrand it, and replace the content. - [Licensing & seats](https://desyne.dev/docs/pro/licensing.md): How purchases become license keys, how to sign in, regenerate keys and invite teammates, and what the license allows. - [Pro FAQ](https://desyne.dev/docs/pro/faq.md): Common questions about buying, installing and using Desyne Pro. ## Resources - [AI & llms.txt](https://desyne.dev/docs/ai.md): Give Cursor, Claude, ChatGPT or any coding assistant accurate Desyne context with llms.txt, full-text Markdown and per-page Markdown. - [Contributing](https://desyne.dev/docs/contributing.md): Run the repo locally, add a component with examples and docs, and the conventions a pull request should follow. - [License](https://desyne.dev/docs/license.md): What you can do with the free components and with Pro blocks and templates, in plain words. - [Changelog](https://desyne.dev/changelog) - [llms.txt](https://desyne.dev/llms.txt) ## Components - [Components](https://desyne.dev/docs/components.md): Every component, grouped by category. Click one for examples, code and install instructions. ## Components: Typography - [Typography](https://desyne.dev/docs/components/typography.md): A small type system on the theme's tokens. Heading separates the semantic level from the visual size, Text covers body copy in sizes, tones and weights, and Prose styles raw HTML or MDX with no plugin. ## Components: Buttons - [Button](https://desyne.dev/docs/components/button.md): Triggers an action or event. Six visual styles, seven colors, eight sizes and a built-in pending state — with press handling that works the same on mouse, touch, pen and keyboard. - [Toggle Button](https://desyne.dev/docs/components/toggle-button.md): A button that switches between on and off, like bold, mute or star. Announced as a pressed toggle, works with mouse, touch and keyboard, and picks up its style from a surrounding toggle button group. - [Toggle Button Group](https://desyne.dev/docs/components/toggle-button-group.md): A set of toggle buttons with single or multiple selection. Use it as an attached button bar, a segmented control or a spaced toolbar; it's one tab stop with arrow-key navigation, and passes its variant and size down to every button. - [Toolbar](https://desyne.dev/docs/components/toolbar.md): A row or column of buttons, toggles and menus that acts as a single tab stop, with arrow-key navigation between controls. Includes groups, separators that follow the orientation, and plain, outline and floating styles. ## Components: Forms - [Form](https://desyne.dev/docs/components/form.md): React Aria's Form with consistent spacing, live validation by default and server-side errors mapped onto fields by name. Includes FormSection (fieldset + legend), FormRow for side-by-side fields and FormActions for the button row. - [Text Field](https://desyne.dev/docs/components/text-field.md): A single-line text input with a label, help text and validation. Supports icon and text adornments, every native input type, native and custom validation, server errors and form submission. - [Textarea](https://desyne.dev/docs/components/textarea.md): A multi-line text input for comments, descriptions and messages. Comes as a complete field with label, help text, character count and validation, or as a bare styled textarea. Resizes vertically, stays fixed, or grows with its content. - [Number Field](https://desyne.dev/docs/components/number-field.md): A numeric input with increment and decrement steppers. Formats and parses numbers in the user's locale, supports currency, percent and unit formatting, min/max/step constraints, keyboard and scroll-wheel stepping, validation and form submission. - [Search Field](https://desyne.dev/docs/components/search-field.md): A text input for search queries, with a search icon, a clear button, Escape to clear and an optional keyboard shortcut hint. Works for live filtering, submit-on-Enter, async search and native search forms. - [Select](https://desyne.dev/docs/components/select.md): Pick a single option from a collapsible list. Supports icons, avatars, descriptions, sections, typeahead, form submission and validation. - [Combo Box](https://desyne.dev/docs/components/combobox.md): A text input with a filterable list of options. Filters as you type, supports rich items, sections, custom values, async loading, custom filters, controlled input and selection, validation and form submission. - [Checkbox](https://desyne.dev/docs/components/checkbox.md): Lets users turn a single option on or off, or pick any number of options from a group. Supports descriptions, an indeterminate state, card layouts, validation and native form submission. - [Radio Group](https://desyne.dev/docs/components/radio-group.md): Lets users pick exactly one option from a small set that stays visible. Renders as a simple list or as selectable cards with icons, and supports descriptions, horizontal layout, validation and native form submission. - [Switch](https://desyne.dev/docs/components/switch.md): Turns a single setting on or off, taking effect immediately. Three sizes, an optional description, start or end label placement for settings lists, and native form submission. - [Slider](https://desyne.dev/docs/components/slider.md): Lets users pick a number, or a range between two numbers, by dragging a thumb along a track. Locale-aware value formatting, steps, tick marks, seven color tones and two sizes, with full keyboard support. - [Input OTP](https://desyne.dev/docs/components/input-otp.md): A one-time code input split into individual character slots. Backed by a single real input, so paste, SMS and password-manager autofill, and screen readers work. Supports digit or alphanumeric patterns, grouped or separated slots, auto-verify on complete, invalid states and form submission. - [Color Picker](https://desyne.dev/docs/components/color-picker.md): A ready-made swatch button that opens a saturation/brightness area, hue slider, hex field and presets in a popover, plus every building block (ColorArea, ColorSlider, ColorField, ColorSwatch, ColorSwatchPicker) to compose your own inline or popover editors. - [Drop Zone](https://desyne.dev/docs/components/drop-zone.md): A drag-and-drop target for files, folders or text, paired with FileTrigger for click-to-browse. Accessible to keyboard and screen-reader users through paste and keyboard drag and drop, with type filtering and a drop-target state for styling. - [Rating](https://desyne.dev/docs/components/rating.md): Lets users give a rating with stars (or any icon), and shows existing ratings with half-star precision. Built on React Aria's RadioGroup for arrow-key support and form integration, with three sizes, seven colors, custom icons, labels for each value and field-style label, description and validation. - [Input Group](https://desyne.dev/docs/components/input-group.md): Attach prefixes, suffixes, icons and buttons to a text input so they read as one field, such as an https:// prefix, a .com suffix, a currency, a copy button or a password toggle. Composes with React Aria's TextField, NumberField and SearchField, and the focus ring wraps the whole group. ## Components: Date & Time - [Calendar](https://desyne.dev/docs/components/calendar.md): An inline month grid for picking a single date, several dates or a date range. Supports min/max bounds, unavailable dates, multiple visible months, any locale and calendar system, and full keyboard navigation. - [Date Field](https://desyne.dev/docs/components/date-field.md): Segmented date and time inputs that users type into or step with the arrow keys. DateField and TimeField format every segment for the user's locale, support time zones and any granularity down to seconds, and validate against min/max, required and custom rules. - [Date Picker](https://desyne.dev/docs/components/date-picker.md): A segmented date field with a calendar popover, for single dates, dates with a time, or date ranges. Users can type or pick; both stay in sync, with min/max bounds, unavailable dates, validation and native form submission built in. ## Components: Overlays - [Dialog](https://desyne.dev/docs/components/dialog.md): A modal window that interrupts the page for a focused task, form or confirmation. Traps focus, locks scroll, restores focus on close, and supports alert, full-screen and controlled modes. - [Sheet](https://desyne.dev/docs/components/sheet.md): A modal panel that slides in from any edge of the screen, for navigation, filters, carts and detail views. Built on the same modal as Dialog, so it traps focus, locks scroll and restores focus on close. - [Popover](https://desyne.dev/docs/components/popover.md): Floating content anchored to a trigger, for small forms, details, pickers and notifications. Positions itself automatically, flips to stay on screen, moves focus in and restores it on close, with an optional arrow. - [Tooltip](https://desyne.dev/docs/components/tooltip.md): A short label shown on hover or keyboard focus, for icon-only buttons, abbreviations and extra context. Tuned delays, a shared warm-up between tooltips, dark and light variants, and an arrow that follows the placement. - [Menu](https://desyne.dev/docs/components/menu.md): A dropdown list of actions or options, opened from a button, a long press or a right click. Supports icons, shortcuts, sections, single and multiple selection, links, submenus and typeahead, with full keyboard navigation. - [Command Palette](https://desyne.dev/docs/components/command-palette.md): A keyboard-driven command menu in a modal, filtered as you type. Built on React Aria's Autocomplete and Menu, with sections, shortcuts, icons, links, disabled commands and a custom empty state; accent- and case-insensitive matching out of the box. ## Components: Navigation - [Tabs](https://desyne.dev/docs/components/tabs.md): Switch between related panels of content without leaving the page. Three styles (line, segmented, enclosed), two sizes, horizontal or vertical, with an animated selection indicator, keyboard navigation and support for tabs that are links. - [Breadcrumbs](https://desyne.dev/docs/components/breadcrumbs.md): Show where the current page sits in a hierarchy, with a link back to each level. Chevron, slash or dot separators, two sizes, icons, dynamic items and onAction for in-app navigation. The last item is marked as the current page automatically. - [Link](https://desyne.dev/docs/components/link.md): Navigate to another page or resource. Three styles, an external mode that opens a new tab with an arrow, disabled and current states, and client-side routing through React Aria's RouterProvider. - [Pagination](https://desyne.dev/docs/components/pagination.md): Move between pages of results. Use the ready-made Paginator for state-driven lists with automatic ellipses, a compact "Page x of y" mode and two sizes, or compose link-based pagination where every page has its own URL. Exports the getPageRange helper behind the ellipsis logic. - [Disclosure](https://desyne.dev/docs/components/disclosure.md): Collapsible sections of content, on their own or grouped as an accordion. Three group styles (line, card, separated), chevron or plus indicators, single or multiple expansion, controlled state, and a height animation that respects reduced motion. Collapsed content stays findable with the browser's find-in-page. - [Sidebar](https://desyne.dev/docs/components/sidebar.md): A composable application sidebar. Collapses off-canvas or to an icon rail, comes in sidebar, floating and inset styles, turns into a modal sheet on small screens, and toggles with ⌘B / Ctrl+B. Menu items can be links or buttons, with badges, groups and tooltips in icon mode. - [Stepper](https://desyne.dev/docs/components/stepper.md): Shows where the user is in a multi-step flow, such as onboarding, checkout or a setup wizard. Horizontal or vertical, with complete, current, upcoming and error states, optional descriptions and icons, two sizes, and pressable steps for moving back through the flow. ## Components: Collections - [List Box](https://desyne.dev/docs/components/list-box.md): An always-visible list of options with single or multiple selection, sections, rich two-line items, links and actions, typeahead, drag and drop, grid layouts and infinite loading. It's the list inside Select and Combo Box. - [Grid List](https://desyne.dev/docs/components/grid-list.md): An interactive list whose rows can hold buttons, menus and links. Supports single and multiple selection with checkboxes, row actions, links, drag-to-reorder and drag between lists, card grid layouts, infinite loading and empty states. - [Table](https://desyne.dev/docs/components/table.md): An accessible data table with row selection and automatic checkbox column, sortable columns, row actions and links, dynamic columns, drag-to-reorder, empty states, and three densities with optional striping, grid lines and frame. - [Tree](https://desyne.dev/docs/components/tree.md): An expandable hierarchy such as a file explorer, docs navigation or nested permissions. Items take a title, an icon that can follow the expanded state and a trailing suffix, with single or multiple selection and full keyboard support. - [Tag Group](https://desyne.dev/docs/components/tag-group.md): A focusable group of compact labels, keywords or filters. Tags can be colored, selected (single or multiple), removed with the keyboard or a button, act as links or actions, and come in soft and outline variants at two sizes. ## Components: Display - [Card](https://desyne.dev/docs/components/card.md): A surface that groups related content and actions. Four surface styles, three padding sizes, a header with an action slot and optional hairline, an inset surface for previews, and a footer for actions. Server-component safe. - [Badge](https://desyne.dev/docs/components/badge.md): A small, non-interactive label for status, counts, versions and categories. Four styles including a status dot, seven tone colors, two sizes, a pill shape, and a `badgeVariants` helper for links and custom elements. - [Avatar](https://desyne.dev/docs/components/avatar.md): A user or workspace image with an automatic fallback to initials or an icon while it loads or when it fails. Five sizes, circle and square shapes, deterministic fallback colors, a presence dot, and stacked groups with a "+N" overflow. - [Separator](https://desyne.dev/docs/components/separator.md): A thin horizontal or vertical rule that separates content, with an optional inline label ("or", a date) placed at the start, center or end, and a dashed style. Built on React Aria's Separator, so it's announced correctly. - [Item](https://desyne.dev/docs/components/item.md): A flexible list row with media, a title, a quiet second line and trailing actions. Three surface variants, three sizes and four media styles; stack rows in an ItemGroup, divide them with ItemSeparator, or apply itemVariants to a link. API-compatible with shadcn's Item. - [Kbd](https://desyne.dev/docs/components/kbd.md): Displays a keyboard key or shortcut as a keycap. Two sizes, icon support, and a KbdGroup for combinations and sequences. Built on React Aria's Keyboard, so inside a menu item it's linked to the item as its shortcut description. - [Chart](https://desyne.dev/docs/components/chart.md): Themed building blocks for Recharts. ChartContainer makes a chart responsive, maps a config of labels, colors and icons to CSS variables that follow light and dark mode, and restyles Recharts' grid, axes and cursors with your tokens; ChartTooltipContent and ChartLegendContent render matching tooltips and legends. You compose the charts with Recharts itself. - [Carousel](https://desyne.dev/docs/components/carousel.md): A swipeable, scrollable set of slides built on Embla Carousel. Horizontal or vertical, one or many slides per view, looping, previous and next buttons that disable at the ends, arrow-key navigation, WAI-ARIA labels and slide announcements, and full access to the Embla API for counters, dots, thumbnails and autoplay. - [Timeline](https://desyne.dev/docs/components/timeline.md): A vertical list of events, such as an activity feed, an order's shipping history or a ticket's audit trail. Each item has a dot, icon or avatar, a title, a time and optional content, joined by connector lines. Comes in default and compact densities, with tone-colored markers and an option to hide the connector. - [Description List](https://desyne.dev/docs/components/description-list.md): Term and value pairs for detail pages, settings summaries and record sidebars. A semantic dl with a side-by-side layout that stacks on small screens, or a stacked layout, plus optional dividers and two sizes. Works in server components. - [Empty](https://desyne.dev/docs/components/empty.md): An empty state for lists, tables, search results and new accounts. Media, a title, a short explanation and the next action, centered, in three surfaces and three sizes. Same composition style as Item and Card, and works in server components. ## Components: Layout - [Scroll Area](https://desyne.dev/docs/components/scroll-area.md): A scroll container with thin, themed scrollbars and optional fading edges. Native scrolling (wheel, touch, keyboard and scroll snapping all work as usual), styled with CSS only, vertically, horizontally or both, with always-visible, hover-only or hidden scrollbars. ## Components: Feedback - [Alert](https://desyne.dev/docs/components/alert.md): An inline callout for messages that belong to the page — status, warnings, errors and announcements. Four styles, seven colors, default or custom icons, trailing actions and an optional dismiss button. - [Progress Bar](https://desyne.dev/docs/components/progress-bar.md): Shows the progress of an operation over time, as a bar or a circle. Determinate or indeterminate, with a visible label, locale-aware value formatting, custom value text, three sizes and seven colors. - [Meter](https://desyne.dev/docs/components/meter.md): Shows a measurement within a known range, like storage used, a quota or password strength. The color follows configurable thresholds from success to warning to danger, with a segmented style, custom value text and locale-aware formatting. - [Progress Circle](https://desyne.dev/docs/components/progress-circle.md): Circular progress on React Aria's ProgressBar. Determinate or indeterminate, in four sizes and seven colors, with the value, your own text or an icon in the middle of the ring. Respects reduced motion. - [Skeleton](https://desyne.dev/docs/components/skeleton.md): A placeholder that mirrors the shape of content while it loads, so the layout doesn't jump when data arrives. Any size or shape via classes, with pulse, shimmer or static animation. - [Spinner](https://desyne.dev/docs/components/spinner.md): A compact, indeterminate loading indicator for short waits. Four sizes, inherits the current text color or takes a tone, and exposes an accessible status label. Server-component safe. - [Toast](https://desyne.dev/docs/components/toast.md): Brief, non-blocking notifications that stack in a corner of the screen, powered by sonner. Typed toasts with themed icons, descriptions, actions, promise and loading states, in-place updates, custom content and six positions. ## Optional - [Full documentation](https://desyne.dev/llms-full.txt): every page above concatenated as Markdown, with each component's main example inlined. Append `.md` to a page URL for all of its examples. - [Component registry item](https://desyne.dev/r/button.json): shadcn registry JSON for any component at `/r/.json`.