Components
69 accessible React primitives with live previews, props APIs, and usage guidance, built on Base UI.
Search or jump to a category, then open a row for the live preview, props, and guidance. Every entry here is what MCP and the CLI treat as canonical when they govern a codebase built on this library.
69 components
Actions
Name | Purpose | Status |
|---|---|---|
| Button | Triggers an action — save, submit, delete, open. | stable |
| ButtonGroup | Lays out related buttons in a row with one shared gap and alignment. | stable |
| IconButton | Runs an action from an icon alone, for toolbars and table rows. | stable |
| ToggleGroup | Picks exactly one option from a short row of toggle buttons. | stable |
Inputs
Name | Purpose | Status |
|---|---|---|
| Checkbox | Selects options that take effect when a form is submitted. | stable |
| Chip | Pill control for filtering, multi-select, and removable tags. | stable |
| ColorPicker | Selects a color through a visual picker and hexadecimal input. | stable |
| Combobox | Filters a list of options as the user types. | stable |
| DatePicker | Selects a date or date range from a calendar. | stable |
| Editor | Edits rich text with formatting, autosave, and a word count. | stable |
| Field | Composes labels, descriptions, validation, and errors around a form control. | stable |
| Fieldset | Groups related form controls under an accessible legend. | stable |
| Form | Distributes server-side validation errors to its Field components. | stable |
| Input | Collects a single line of user-entered text. | stable |
| Listbox | Shows a keyboard-navigable list of options with no trigger of its own. | stable |
| RadioGroup | Selects one option from a mutually exclusive set. | stable |
| Select | Opens a list and returns the single option the user picks. | stable |
| Slider | Selects a numeric value within a defined range. | stable |
| Switch | Toggles a setting that takes effect immediately. | stable |
| Textarea | Collects multi-line text for longer form content. | stable |
Display
Name | Purpose | Status |
|---|---|---|
| Avatar | Shows who someone is — their photo, or their initials when there is none. | stable |
| Badge | Labels a status, count, or category without pulling focus. | stable |
| Chart | Plots your data with tooltips, legends, and colors that track the theme. | stable |
| CodeBlock | Shows code with syntax colors, a copy button, and diff or collapse when you need them. | stable |
| DataTable | Interactive table — sort, select, expand, and click through rows of data. | stable |
| Icon | Sizes and colours any icon so it lines up with the text beside it. | stable |
| Image | Renders a picture at a fixed shape with a built-in fallback when loading fails. | stable |
| List | Stacks items down the page with evenly spaced bullets, numbers, or icons. | stable |
| Markdown | Turns a Markdown string into styled headings, lists, tables, code, and quotes. | stable |
| Table | Renders tabular data as a real HTML table — headers, rows, footer. | stable |
| Text | Applies the type scale to any text element, without hand-rolling font rules. | stable |
Feedback
Name | Purpose | Status |
|---|---|---|
| Alert | Tells the user what just happened, or what is about to. | stable |
| EmptyState | Explains why an area is blank and offers the next step. | stable |
| Loading | Signals that something is happening when you cannot say how long it will take. | stable |
| Progress | Shows how far along a task is, as a bar or a ring. | stable |
| Skeleton | Holds the shape of content that has not arrived yet. | stable |
| Toast | Briefly reports what just happened, without blocking the page. | stable |
Overlays
Name | Purpose | Status |
|---|---|---|
| Dialog | Blocks the page with one focused task the user must finish or dismiss. | stable |
| Drawer | Slides a panel in from a screen edge and dims the page behind it. | stable |
| Menu | Drops a list of actions below a trigger, driveable entirely by keyboard. | stable |
| Popover | Anchors interactive content to a trigger without blocking the page. | stable |
| Tooltip | Shows a one-line hint when a control is hovered or focused. | stable |
Navigation
Name | Purpose | Status |
|---|---|---|
| Breadcrumbs | Shows where the user is and links back up the hierarchy. | stable |
| Command | Filters a list of actions as the user types. | stable |
| Link | Navigates somewhere else, inline or in chrome, with real link semantics. | stable |
| NavigationMenu | Site navigation whose dropdowns become a drawer on small screens. | stable |
| Pagination | Steps through content split across numbered pages. | stable |
| TableOfContents | Indexes a long page and marks the section currently in view. | stable |
| Tabs | Swaps between sibling panels without leaving the page. | stable |
Layout
Name | Purpose | Status |
|---|---|---|
| Accordion | Stacks sections that expand one at a time, or several at once. | stable |
| AppShell | Lays out header, sidebar, main, and optional aside as one responsive app frame. | stable |
| BentoGrid | Asymmetric feature grid where tiles span different widths and heights. | stable |
| Box | Applies spacing, background, border, and radius to any element. | stable |
| Card | Groups related content onto one bounded surface. | stable |
| Collapsible | Shows or hides one region of content behind a trigger. | stable |
| Grid | Arranges items into responsive columns with one shared gap. | stable |
| Header | Composes brand, navigation, search, and actions into one responsive app bar. | stable |
| Main | Owns a page's gutters, reading measure, and vertical rhythm. | stable |
| ScrollArea | Scrolls overflowing content with a slim scrollbar and optional edge fades. | stable |
| Separator | Draws a rule between sections of related content. | stable |
| Sidebar | Collapsible navigation panel that turns into a drawer on mobile. | stable |
| Stack | Stacks children in a row or column with one consistent gap. | stable |
AI
Name | Purpose | Status |
|---|---|---|
| ConversationList | Stacks chat messages in a scroller that follows new arrivals. | stable |
| Message | Shows one chat message, styled by who sent it. | stable |
| Prompt | Collects multi-line input for AI and chat interfaces. | stable |
| ThinkingIndicator | Shows that an AI response is being generated. | stable |
Utilities
- ComponentDefaults Utility provider that sets the default control size for every control below it.
- Theme Utility provider that gives everything below it a light, dark, or system color mode.
- VisuallyHidden Keeps text in the accessibility tree while taking it off the screen.
FAQ
Are Fragments components accessible?
Yes. Fragments focuses on accessible React components and includes usage guidance, accessibility notes, and standards references on component pages where applicable.Are these components built on Base UI primitives?
Yes. Fragments components are built on Base UI headless primitives and layered with Fragments styling, tokens, and metadata for AI-assisted workflows.Where can I find examples and props?
Open any row to view a live preview, examples, a props table, usage guidance, and related components. Start with common building blocks like Button, Dialog, Input, and Card.Next steps
- Getting startedInstall the library, wrap the provider, and start composing.
- AccessibilityWCAG 2.2 AA mapping, keyboard patterns, and testing coverage.