ConversationList
Scrollable message container with auto-scroll and history loading
Components
These React component library docs cover 66 accessible React components with examples, props APIs, and usage guidelines.
Browse components by category, then open each page for live examples, props, and usage guidance across 66 documented components. New to Fragments? Start with Getting Started, customize tokens in the Theme Builder, and connect AI via MCP Tools.
Categories are grouped to make discovery faster when you are choosing the right component for a new feature or validating alternatives in an existing screen.
DISPLAY
Badge
Compact label for status, counts, or categorization. Draws attention to metadata without dominating the layout.
Avatar
Visual representation of a user or entity
Chart
Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.
CodeBlock
Syntax-highlighted code display with copy functionality, theming, diff view, and collapsible sections
DataTable
Data table with sorting, selection, and column management. Powered by TanStack Table.
Icon
Wrapper for icon components with consistent sizing and semantic colors. Provides standardized icon rendering across the design system.
Image
Responsive image component with aspect ratio control, loading states, and error fallbacks. Handles image display with consistent styling.
List
Compound component for rendering ordered or unordered lists with consistent styling. Supports bullet, numbered, and icon-prefixed items.
Markdown
Renders markdown strings as styled prose using react-markdown and remark-gfm. Supports headings, lists, tables, code blocks, blockquotes, and more.
Text
Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.
Table
Semantic HTML table with compound API. For data-rich tables with sorting and selection, use DataTable.
FEEDBACK
Alert
Contextual feedback messages for user actions or system status. Supports multiple severity levels with optional actions and dismissibility.
Drawer
A panel that slides in from screen edges. Extends the Dialog pattern with slide animations and edge positioning.
Dialog
Modal overlay for focused user interactions. Use for confirmations, forms, or content requiring full attention.
EmptyState
Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.
Loading
Versatile loading indicator with multiple variants for showing progress or waiting states
Menu
Dropdown menu for actions and commands. Supports submenus, check items, radio groups, and keyboard shortcuts.
Popover
Rich content overlay anchored to a trigger element. Use for forms, detailed information, or interactive content that should stay in context.
Progress
Visual indicator of task completion or loading state. Available in linear and circular variants.
Skeleton
Placeholder loading state for content
Toast
Brief, non-blocking notification messages
Tooltip
Contextual help text that appears on hover or focus. Perfect for explaining icons, truncated text, or providing additional context.
FORMS
ButtonGroup
Groups related buttons together with consistent spacing and alignment. Useful for action bars, toolbars, and related button sets.
Button
Interactive element for user actions and form submissions
Checkbox
Binary toggle for form fields. Use for options that require explicit submission, unlike Switch which takes effect immediately.
Chip
Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group.
Combobox
Searchable select input that filters a dropdown list of options as you type. Supports single and multiple selection with chips.
ColorPicker
Color selection control with hex input and visual picker. Displays a swatch that opens a full color picker on click.
DatePicker
Date picker with calendar dropdown for selecting single dates or date ranges. Built on react-day-picker with seed-based theming.
Editor
Rich text editor with formatting toolbar, auto-save, and word count
Field
Compositional form field wrapper providing validation, labels, descriptions, and error messages. Use for advanced form needs beyond baked-in Input/Textarea props.
Fieldset
Groups related form fields with an accessible legend. Use to organize forms into logical sections.
Form
Form wrapper that handles server-side error distribution to Field components. Pairs with Field for complete form validation.
Input
Text input field for single-line user data entry
Listbox
Controlled listbox for search results, autocomplete dropdowns, and command menus. Provides Menu-like styling without requiring a trigger.
RadioGroup
Single selection from a list of mutually exclusive options
Select
Dropdown for choosing from a list of options. Use when there are more than 4-5 choices that would clutter the UI.
Slider
Range input control for selecting a numeric value within a defined range. Supports labels, value display, and custom step intervals.
Textarea
Multi-line text input for longer form content
Switch
Binary on/off switch for settings and preferences. Provides immediate visual feedback and is ideal for options that take effect instantly.
ToggleGroup
A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.
LAYOUT
Accordion
Vertically stacked, collapsible content sections. Use for organizing related content that can be progressively disclosed.
AppShell
Full layout wrapper integrating sidebar, header, main content, and optional aside panel. Two structural layouts (default, sidebar) combine with per-slot variant="floating" for full flexibility.
BentoGrid
Asymmetric grid layout with responsive spans and built-in surface styling for bento-style feature sections
Box
Primitive layout component for applying spacing, backgrounds, and borders. A flexible container for building custom layouts.
Card
Container for grouping related content
Collapsible
An interactive component that expands/collapses to show or hide content
Grid
Responsive grid layout for arranging items in columns with consistent spacing
ScrollArea
A styled scrollable container with thin scrollbars and optional fade indicators.
Separator
Visual divider between content sections. Use to create clear visual boundaries and improve content organization.
Stack
Flexible layout component for arranging children in rows or columns with consistent spacing. Supports responsive direction and gap.
NAVIGATION
Breadcrumbs
Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages.
Command
A searchable command palette for quick actions. Combines an input with a filterable, keyboard-navigable list of actions.
Header
Composable header with slots for brand, navigation, search, and actions. Supports dropdown nav groups via Header.NavMenu. Designed for use within AppShell with responsive mobile support.
Link
Styled anchor element for navigation. Supports internal and external links with consistent visual treatment.
NavigationMenu
Rich navigation menu for site headers with dropdown content panels, animated viewport transitions, and automatic mobile drawer. Supports structured links with titles, descriptions, and icons.
Pagination
Page navigation for paginated data. Supports controlled/uncontrolled, page counts, and edge/sibling customization.
Sidebar
Responsive navigation sidebar with collapsible desktop mode and mobile drawer behavior.
Tabs
Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout.
TableOfContents
Sticky sidebar navigation for long-form content. Renders heading links with active state highlighting for scroll spy integration.
Theme
Theme management system with provider, toggle, and hook pattern. Supports light, dark, and system modes with localStorage persistence.
VisuallyHidden
Hides content visually while keeping it accessible to screen readers. Essential for accessible icon-only buttons and supplementary text.