Components
71 React components from @usefragments/ui. Find the right building block, try it, and copy a working example.
New to the library? Install the package first. Then search by name or browse a category below. Each page brings together live examples, usage advice, installation, and the API reference.
71 components
Untitled UI
“Fragments UI is the most explicitly AI-native design system we've seen.”
Base UI
Listed by Base UI as a styled library built on Base UI
Actions
Name | Purpose | Status |
|---|---|---|
| Button | Triggers an action — save, submit, delete, open. | stable |
| ButtonGroup | Fuses two actions into one control, a split button, with one hairline between them. | stable |
| IconButton | Runs an action or toggles state from an icon in toolbars and table rows. | stable |
| ToggleGroup | Selects among two to five options in a segmented control with a visible active choice. | stable |
Inputs
Name | Purpose | Status |
|---|---|---|
| Checkbox | Selects options that take effect when a form is submitted. | stable |
| Chip | A compact value: a tag, a filter or an applied selection, in one untoned look. | 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 | Owns the label, description and error for one form control. | stable |
| Fieldset | Groups related form controls under an accessible legend, on a surface. | stable |
| FilterBar | Labelled filters on one line that fold behind one button when the line no longer fits. | stable |
| Form | Groups fields and actions, routes server errors to fields, and disables fields while submission is pending. | stable |
| Input | Collects single-line text, with search mode offering a clear button and live result count. | stable |
| Listbox | Shows an inline, keyboard-navigable list of options with no trigger of its own. | stable |
| NumberField | Collects numeric values with arrow-key stepping, label scrubbing and optional units. | beta |
| RadioGroup | Selects one option from a mutually exclusive set. | stable |
| Select | Opens a list and returns the single option the user picks. | stable |
| Slider | Chooses a number, or a range with one thumb per value, along a track. | stable |
| Switch | Toggles a setting that takes effect immediately. | stable |
| Textarea | Collects multi-line text; grows with its text from minRows to maxRows, then scrolls. | 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: one 20px step at the indicator corner. | stable |
| Chart | Plots your data with tooltips, legends, and colors that track the theme. | stable |
| CodeBlock | Displays code with syntax highlighting, copying, and optional line numbers, diffs or folding. | stable |
| DataTable | Interactive table — sort, select, expand, and click through rows of data. | stable |
| Icon | Sizes any icon onto the glyph ladder and gives it one ink. | stable |
| Image | Frames pictures with loading feedback and a fallback when the image fails. | stable |
| Kbd | Draws a keyboard key on a keycap, alone or as one shortcut. | stable |
| List | Stacks items down the page with bullets, numbers or icons, or as interactive 32px rows. | stable |
| Markdown | Renders Markdown headings, lists, tables, quotes and syntax-highlighted code at conversation scale. | stable |
| Table | Renders tabular data as a real HTML table — headers, rows, footer — at one 32px row track. | stable |
| Text | Applies the 11/12/15/24 type ladder to any text element, without hand-rolling font rules. | stable |
Feedback
Name | Purpose | Status |
|---|---|---|
| Alert | Highlights information, warnings or errors inline, with context and a clear next action. | stable |
| EmptyState | Explains why an area is blank and offers the next step. | stable |
| Loading | Signals an indeterminate wait: a spinner, dots, a pulse, bars, a matrix or a shimmer. | stable |
| Progress | Shows how far along a task is, as one thin bar. | stable |
| Skeleton | Holds the shape of content that has not arrived yet. | stable |
| Toast | Briefly reports an outcome without blocking the page, using an icon to convey tone. | stable |
Overlays
Name | Purpose | Status |
|---|---|---|
| AlertDialog | Requests a required decision, focusing the safest answer and preventing dismissal by outside presses. | stable |
| Dialog | Blocks the page with one focused task the user finishes or dismisses. | stable |
| Drawer | Shows edge sheets for navigation or inspection, with focus management and swipe dismissal. | 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 and ranks commands as users type, with an optional floating palette. | stable |
| Link | Navigates somewhere else, inline or in chrome, with real link semantics. | 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 | Frames the application with header, sidebar, main and optional aside regions, sharing sidebar state. | stable |
| Box | Places content on a chosen plane with optional borders, corners and inset spacing. | 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 | Groups the brand, navigation, dropdowns, search, actions and navigation trigger in a top bar. | stable |
| Main | Defines the page region, title, content gutter, reading width and vertical rhythm. | stable |
| ScrollArea | Scrolls overflowing content with a slim scrollbar and optional edge fades. | stable |
| Separator | Draws one hairline between sections of related content. | stable |
| Sidebar | Navigates through a collapsible desktop rail that becomes a modal panel on smaller screens. | stable |
| Stack | Stacks children in a row or column with one consistent gap. | stable |
AI
Name | Purpose | Status |
|---|---|---|
| ConversationList | Follows new messages at the end, preserving position during scrolling and history loading. | stable |
| Message | Displays user or assistant conversation turns, including sending, streaming and failure states. | stable |
| Prompt | Composes chat input with attachments and pickers, switching Send to Stop while the assistant works. | stable |
| ThinkingIndicator | Shows assistant progress with optional timing and steps, retaining a completion message when work stops. | stable |
Utilities
- ComponentDefaults Utility provider that sets the default control size for every control below it.
- Theme Sets color mode and theme inputs for the page or a nested subtree.
- VisuallyHidden Keeps text in the accessibility tree while taking it off the screen.
FAQ
Are Fragments components accessible?
Component pages document keyboard behavior, labeling requirements, and relevant standards. Your app still needs testing with its own content, navigation, and theme.Are these components built on Base UI primitives?
Interactive components use Base UI where appropriate. Fragments adds styling, design tokens, layout components, and metadata describing the public API.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 package, load its styles, and render a component.
- AccessibilityKeyboard patterns, labeling guidance, and checks for your app.