Components
86 components built on react-aria-components. Each one installs with the shadcn CLI into components/fma-ds/.
Buttons
- ButtonDisplays a button, or a component that looks like one, with a set of visual variants and sizes. Also exports LinkButton (react-aria-components' Link, same variants) for link-as-button use cases.
- Button GroupVisually joins a row (or column) of buttons into one connected control, with shared borders and rounded end corners. Can include a separator or a plain text segment.
- Copy ButtonAn icon button that copies a value too long to type (protocol, tracking code, Pix code, token) to the clipboard.
- ToggleA single two-state pressable button (on/off) — the single-button counterpart to ToggleGroup.
- Toggle GroupA connected row (or column) of Toggle buttons sharing one visual variant/size/spacing, for grouped single- or multi-select controls (e.g. text formatting).
Chat
- AttachmentA file/attachment chip for chat-style UIs — shows a name, optional upload progress or error state, and an independently clickable remove action.
- BubbleA single chat message bubble — start/end alignment for sent vs. received, several color variants, and an optional reactions pill overlaid on a corner.
- MarkerA small inline label used in chat/message timelines — a date separator, a status note, or similar metadata — rendered in muted text with an optional icon.
- MessageLayout for one message row in a chat UI — avatar, header, footer, and a content column that aligns to the start or end depending on who sent it. Pairs with Bubble for the actual message content.
- Message ScrollerAn auto-scrolling viewport for chat message lists: sticks to the latest message as new ones arrive, and shows a jump-to-end/start button once the user scrolls away.
- QuestionnaireA multi-step form/survey block (progress, choices, text input, previous/skip/next/submit) for chat-kit style conversational flows.
- TraceA compact activity log for AI agents.
Data display
- AvatarA user/entity image with a text or icon fallback for when the image fails to load. Composes into overlapping groups for showing multiple participants.
- BadgeA small label for status, count, or category — inline with text or attached to another element.
- CarouselA carousel for cycling through slides (images, cards, or any content) with keyboard, swipe, and button navigation.
- ChartComposable chart primitives (ChartContainer, ChartTooltip, ChartLegend) wrapping Recharts, themed via CSS custom properties from a ChartConfig. Supports area, bar, line, and pie charts.
- Code BlockA code block with shiki syntax highlighting, for docs and AI chat UIs. <CodeBlock code={code} language="tsx" /> is complete on its own.
- Credit CardA payment card drawn from its data, to show a saved card or preview one while it's typed.
- Data GridA data grid driven by a TanStack Table v9 instance and rendered with react-aria's Table, which brings cell keyboard navigation, aria-sort, selection, column resizing, row drag and drop and virtualization.
- Description ListTerm/value pairs on a semantic <dl>: DescriptionList > DescriptionItem > DescriptionTerm + DescriptionDetails.
- File TypeA file type icon: a page with a folded corner and the extension label, in the format's brand or family color (Word blue, Excel green, the GitHub language colors).
- Icon TileA square surface that gives icons a consistent footprint.
- KbdDisplays a keyboard key or shortcut (e.g. ⌘K) inline, styled as a small pill. KbdGroup lays out several keys side by side for combos like ⌘+Shift+P.
- SortableA reorderable list, row or grid (layout: vertical, horizontal, grid).
- TableSemantic table primitives (header, body, rows, cells, footer, caption) built on react-aria-components' Table for accessible, sorting/selection-ready markup.
- TimelineA vertical or horizontal timeline rendered as an ordered list.
Disclosure
- AccordionA vertically stacked set of headers that expand to reveal or hide associated content. Supports single or multiple items open at once.
- CollapsibleShows or hides a single section of content behind a trigger. A thin wrapper around react-aria-components' Disclosure — for several mutually-exclusive sections, use Accordion instead.
Feedback
- AlertA callout for important, static information — supports an icon, title, description, and an optional action, with semantic variants (destructive/info/success/warning/invert) and a brand variant for announcements and promos in the theme's second identity color.
- EmptyA placeholder for empty states — no data, no search results, nothing configured yet. Composes an icon/media, title, description, and optional call-to-action content.
- Icon StackA layered icon illustration for empty states: three receding cards drawn from currentColor, with an optional glyph (children) laid flat on the front card.
- Loading OverlayBlocks interaction while an operation runs. No brand animation: just a spinner.
- ProgressA horizontal progress bar communicating the completion of a task, determinate or indeterminate, with optional label/value slots.
- SkeletonA pulsing placeholder block for content that's still loading — size and shape it with className to match whatever it stands in for.
- SonnerA themed wrapper around the sonner toast library. Renders the toast viewport (Toaster); call toast() from "sonner" anywhere to actually show one.
- SpinnerA spinning loading indicator icon (role="status"), sized via className — drop it inside a disabled button or empty state while something loads.
Forms
- CalendarA date grid for selecting a single date, multiple dates or a range.
- CheckboxA control for a single on/off/indeterminate value.
- Color PickerA composable color picker: ColorPicker holds the color and shares it with parts laid out in any way.
- ComboboxA searchable, filterable select combining a text input with a listbox popover. Supports single selection (ComboboxValue) or a multi-select tag/chip input (ComboboxChips + ComboboxChip).
- Date FieldA segmented, keyboard-editable date input.
- Date PickerA typed date input paired with a calendar popover over one value, for single dates (DatePicker) or ranges (DateRangePicker).
- Emoji PickerAn emoji picker with search, skin tones, recently used emoji, custom emoji and a virtualized grid.
- FieldLayout primitives for building form fields. Pairs with Label, Input, and friends.
- File UploadPicks files by dragging them in, pasting them or browsing, and lists them; it doesn't upload.
- InputA single-line text input, styled to match the rest of the registry. Plain native attributes (disabled, not isDisabled) since it wraps react-aria-components' bare Input rather than a higher-level field primitive.
- Input GroupWraps an Input or Textarea with leading/trailing addons (icons, text, or buttons) inside one bordered container, so the whole group shares a single focus ring and border.
- Input OtpA one-time-password / verification-code input rendered as individual boxed slots, backed by a single hidden text input for real typing, paste, and autofill behavior.
- LabelA form field label.
- Masked InputAn Input with live Maskito formatting. Works inside a react-aria TextField.
- Native SelectA styled wrapper around the real, native <select> — use it when you need actual native select behavior (mobile OS pickers, form autofill, no JS dependency) instead of react-aria-components' custom Select.
- Password InputA password field with a show/hide toggle, built on InputGroup. Pair it with password-rules when creating a password.
- Password RulesThe rules a new password must follow, each marked pending, met or unmet as the user types — by icon and a screen-reader state label (stateLabels), not color alone.
- Radio GroupA set of mutually-exclusive radio options.
- SelectA listbox-style picker (react-aria-components' Select) with a trigger, popover, groups, and an optional search input — richer than the native <select> (see native-select for that).
- SliderA draggable single- or range-value slider, horizontal or vertical. Pass an array default/value to get one thumb per value.
- SwitchA two-state on/off toggle switch, in default and compact sizes.
- TextareaA multi-line text input that auto-sizes to its content by default (field-sizing-content), rather than staying a fixed number of rows.
- Time PickerA composable time picker: hour, minute, second and AM/PM columns, in a popover or in place.
Layout
- Aspect RatioConstrains content (typically an image or video) to a fixed width/height ratio, so it scales without distortion or layout shift.
- CardA container for grouping related content, with header, title, description, action, content, and footer slots. Supports a compact size="sm" variant.
- DirectionSets LTR/RTL text-direction context for descendant react-aria-components — a compatibility shim so a Radix/Base UI-style direction prop keeps working via react-aria's locale system.
- ItemA generic row layout for lists of things — media/icon, title, description, and trailing actions.
- ResizableResizable split panes (panel group, panel, drag handle) built on react-resizable-panels — for layouts like a sidebar/editor split the user can drag to resize.
- Scroll AreaA scrollable container with a themeable, always-consistent-looking scrollbar via native scrollbar-width/scrollbar-color — no JS scrollbar emulation.
- SeparatorA thin visual divider between content, horizontal or vertical.
Navigation
- BreadcrumbShows the user's current location within a hierarchy, as a trail of links back to parent pages, with an ellipsis for collapsing long paths.
- MenubarAn app-style menu bar (File, Edit, View…).
- Navigation MenuSite-header navigation: a <nav> list of top-level links and disclosure dropdowns. For app command menus use Menubar or DropdownMenu.
- PaginationPage-number navigation built from LinkButton — previous/next controls, numbered links, and an ellipsis for collapsed ranges.
- SidebarA collapsible application sidebar with a mobile drawer fallback, a Cmd/Ctrl+B keyboard shortcut, and composable header/content/footer/menu slots.
- StepperMulti-step navigation, horizontal or vertical, built on react-aria Tabs.
- Tab NavNavigation between the pages of an area that looks like tabs: a <nav> of react-aria links where the current page carries aria-current="page".
- TabsA tab list and its panels for switching between related views, with default and line visual variants, horizontal or vertical orientation.
Overlay
- Alert DialogA modal dialog that interrupts the user with important content and expects an explicit response (e.g. confirming a destructive action) — unlike Dialog, it can't be dismissed by clicking outside or pressing Escape.
- CommandA searchable list of commands or actions, filtered live as you type.
- Confirm DialogA ready-made yes/no dialog on top of the use-dialog-promise hook.
- Context MenuA menu that opens on right-click (or long-press on touch) instead of a regular trigger click. Supports nested submenus, separators, and keyboard shortcut display.
- DialogA modal window layered over the page, requiring explicit action (or Escape) to dismiss. Pair with react-aria-components' DialogTrigger to wire up the trigger and open state.
- DrawerA panel that slides in from an edge of the screen, with swipe-to-dismiss and snap-point support. Uses @base-ui/react (not react-aria-components), so its API and data attributes differ from this repo's other overlays.
- Dropdown MenuA menu of actions or options triggered by clicking a button. Supports nested submenus, separators, labels, and a shortcut-display slot for each item.
- GlanceA quick piece of information that opens more context one click away — an account notice, a balance, a count of pending items.
- Hover CardA popover that shows on hover or focus instead of click, for previewing content (a profile card, a link preview) without navigating away. Unlike a tooltip, it can contain interactive content.
- PopoverA non-modal floating panel anchored to a trigger — for supplementary controls or content (e.g. a settings form) that shouldn't block the rest of the page.
- SheetA modal panel that slides in from an edge of the screen (top/right/bottom/left) — for navigation drawers, filters, or forms that need more room than a popover.
- TooltipA short, non-interactive hint that appears on hover or keyboard focus of its trigger.