# Fragments — Full AI Reference

https://www.usefragments.com

Generated — do not edit by hand. Source: `apps/docs/scripts/generate-llms-full.mts`.

## Overview

> Fragments is a desktop app where you design your React app in code instead of on a canvas; your components and design tokens become a design system contract your coding agent has to follow. macOS only, and waitlist-only for now: https://www.usefragments.com/#waitlist. Local work is free; paid plans are coming soon. The @usefragments/ui React package, @usefragments/core APIs and optional @usefragments/cli also work independently.

Start with the [desktop guide](https://www.usefragments.com/docs) and [Desktop Checks](https://www.usefragments.com/docs/checks). The package reference below is optional.

## Install the package

```bash
npm install @usefragments/ui
```

Import components from `@usefragments/ui` and load `@usefragments/ui/styles` once. React 18 or 19 is required. Advanced integrations use optional peer dependencies. For Sass configuration use `@usefragments/ui/scss`, keeping the prebuilt component CSS loaded before your configured stylesheet.

### Optional copied source

```bash
npx @usefragments/cli add button card
```

The public registry needs no account. It copies source into the app and records an artifact lockfile. The npm package remains the default; registry migration is optional.

### Optional CLI and local MCP

```bash
npm install -D @usefragments/cli
npx @usefragments/cli init --plan
npx @usefragments/cli init --install --metadata-only
npx @usefragments/cli mcp --stdio
```

The local MCP tools are `contract`, `search`, `get`, `check` and `tokens`, using the repository configuration. These are published CLI tools, separate from the desktop runtime. Review the init plan before installing.

Public packages: `@usefragments/ui`, `@usefragments/core`, `@usefragments/cli` and `@usefragments/font`. `@usefragments/workshop`, `@usefragments/codemod` and `@repo/*` are private workspaces; do not install them from npm. Public UI source and issues remain at https://github.com/fragments-sdk/ui.

## Component Catalog (71 components)

### Actions

- [Button](https://www.usefragments.com/components/button) — Triggers an action — save, submit, delete, open.
  Members: `Button.Root` · Props: `children`, `focusableWhenDisabled`, `fullWidth`, `nativeButton`, `pending`, `render`, `size=lg|md|sm|xs`, `tone=accent|danger|neutral`, `variant=ghost|link|soft|solid`
- [ButtonGroup](https://www.usefragments.com/components/buttongroup) — Fuses two actions into one control, a split button, with one hairline between them.
  Members: `ButtonGroup.Root` · Props: `aria-label`, `aria-labelledby`, `children`
- [IconButton](https://www.usefragments.com/components/iconbutton) — Runs an action or toggles state from an icon in toolbars and table rows.
  Members: `IconButton.Root` · Props: `aria-label`, `aria-labelledby`, `children`, `defaultPressed`, `disabled`, `nativeButton`, `onClick`, `onPressedChange`, `pending`, `pressed`, `render`, `size=lg|md|sm|xs`, `type=button|reset|submit`, `value`, `variant=ghost|soft`
- [ToggleGroup](https://www.usefragments.com/components/togglegroup) — Selects among two to five options in a segmented control with a visible active choice.
  Members: `ToggleGroup.Item`, `ToggleGroup.Root` · Props: `children`, `defaultValue`, `disabled`, `fullWidth`, `multiple`, `onValueChange`, `size=lg|md|sm|xs`, `value`

### AI

- [ConversationList](https://www.usefragments.com/components/conversationlist) — Follows new messages at the end, preserving position during scrolling and history loading.
  Members: `ConversationList.Event` · Props: `autoScroll=false|smart`, `children`, `emptyState`, `history=error|idle|loading`, `label`, `onRetryHistory`, `onScroll`, `onScrollTop`
- [Message](https://www.usefragments.com/components/message) — Displays user or assistant conversation turns, including sending, streaming and failure states.
  Members: `Message.Actions`, `Message.Avatar`, `Message.Content`, `Message.Error`, `Message.Timestamp` · Props: `actions`, `avatar`, `children`, `from=assistant|user`, `onRetry`, `status=complete|error|pending|streaming`, `timestamp`
- [Prompt](https://www.usefragments.com/components/prompt) — Composes chat input with attachments and pickers, switching Send to Stop while the assistant works.
  Members: `Prompt.Actions`, `Prompt.Attach`, `Prompt.Attachments`, `Prompt.Info`, `Prompt.Picker`, `Prompt.Submit`, `Prompt.Textarea`, `Prompt.Toolbar` · Props: `accept`, `children`, `defaultValue`, `disabled`, `errorMessage`, `invalid`, `maxRows`, `minRows`, `onFiles`, `onStop`, `onSubmit`, `onValueChange`, `pending`, `placeholder`, `readOnly`, `submitOnEnter`, `value`, `working`
- [ThinkingIndicator](https://www.usefragments.com/components/thinkingindicator) — Shows assistant progress with optional timing and steps, retaining a completion message when work stops.
  Members: `ThinkingIndicator.Root`, `ThinkingIndicator.Step`, `ThinkingIndicator.Steps` · Props: `active`, `children`, `doneLabel`, `label`, `showElapsed`

### Display

- [Avatar](https://www.usefragments.com/components/avatar) — Shows who someone is — their photo, or their initials when there is none.
  Members: `Avatar.Group` · Props: `alt`, `fallback`, `imageProps`, `initials`, `name`, `size=lg|md|sm|xs`, `src`
- [Badge](https://www.usefragments.com/components/badge) — Labels a status, count, or category without pulling focus: one 20px step at the indicator corner.
  Members: `Badge.Root` · Props: `announce`, `children`, `dot`, `icon`, `onRemove`, `role`, `tone=accent|danger|info|neutral|success|warning`
- [Chart](https://www.usefragments.com/components/chart) — Plots your data with tooltips, legends, and colors that track the theme.
  Members: `Chart.Legend`, `Chart.LegendContent`, `Chart.preload`, `Chart.Root`, `Chart.Tooltip`, `Chart.TooltipContent` · Props: `children`, `config`, `dataTable`, `empty`, `emptyAction`, `emptyDescription`, `error`, `loading`, `onRetry`, `retryLabel`, `style`, `summary`
- [CodeBlock](https://www.usefragments.com/components/codeblock) — Displays code with syntax highlighting, copying, and optional line numbers, diffs or folding.
  Members: `CodeBlock.Tabbed` · Props: `addedLines`, `code`, `collapsedLines`, `collapsible`, `defaultCollapsed`, `highlightLines`, `language=bash|c|cpp|csharp|css|diff|go|graphql|html|java|javascript|js|json|jsx|kotlin|markdown|md|php|plaintext|py|python|ruby|rust|sass|scss|shell|sql|swift|text|ts|tsx|typescript|xml|yaml|yml`, `maxHeight`, `onCopy`, `removedLines`, `showCopy`, `showLineNumbers`, `size=md|sm`, `startLineNumber`, `style`, `title`, `wordWrap`
- [DataTable](https://www.usefragments.com/components/datatable) — Interactive table — sort, select, expand, and click through rows of data.
  Members: `DataTable.Columns`, `DataTable.preload`, `DataTable.Root` · Props: `bordered`, `caption`, `captionHidden`, `columns`, `data`, `emptyState`, `error`, `expanded`, `getRowId`, `getRowProps`, `getSubRows`, `hideHeader`, `loading`, `maxHeight`, `onExpandedChange`, `onRetry`, `onRowClick`, `onRowSelectionChange`, `onSortingChange`, `retryLabel`, `rowSelection`, `selectable`, `showCheckbox`, `skeletonRows`, `sortable`, `sorting`, `wrapperClassName`, `wrapperProps`
- [Icon](https://www.usefragments.com/components/icon) — Sizes any icon onto the glyph ladder and gives it one ink.
  Members: `Icon.Root` · Props: `icon`, `size=lg|md|sm|xl|xs`, `style`, `tone=accent|danger|info|secondary|success|tertiary|warning`, `weight=bold|fill|regular`
- [Image](https://www.usefragments.com/components/image) — Frames pictures with loading feedback and a fallback when the image fails.
  Members: `Image.Root` · Props: `alt`, `aspectRatio=1:1|16:9|4:3|auto`, `className`, `fallback`, `height`, `imgProps`, `objectFit=contain|cover`, `onImageError`, `onImageLoad`, `radius=control|nested|none|surface`, `src`, `style`, `width`
- [Kbd](https://www.usefragments.com/components/kbd) — Draws a keyboard key on a keycap, alone or as one shortcut.
  Members: `Kbd.Group`, `Kbd.Root` · Props: `children`, `label`
- [List](https://www.usefragments.com/components/list) — Stacks items down the page with bullets, numbers or icons, or as interactive 32px rows.
  Members: `List.Item`, `List.Root`, `List.Row` · Props: `as=ol|ul`, `children`, `gap=none|sm|xs`, `marker=disc|icon|none`, `style`
- [Markdown](https://www.usefragments.com/components/markdown) — Renders Markdown headings, lists, tables, quotes and syntax-highlighted code at conversation scale.
  Members: `Markdown.preload`, `Markdown.Root` · Props: `className`, `components`, `content`, `parser`, `streaming`
- [Table](https://www.usefragments.com/components/table) — Renders tabular data as a real HTML table — headers, rows, footer — at one 32px row track.
  Members: `Table.Body`, `Table.Caption`, `Table.Cell`, `Table.Empty`, `Table.Footer`, `Table.Head`, `Table.HeaderCell`, `Table.Loading`, `Table.Root`, `Table.Row` · Props: `bordered`, `children`, `maxHeight`, `wrapperClassName`, `wrapperProps`
- [Text](https://www.usefragments.com/components/text) — Applies the 11/12/15/24 type ladder to any text element, without hand-rolling font rules.
  Members: `Text.Root` · Props: `as=abbr|address|blockquote|cite|code|del|div|em|h1|h2|h3|h4|h5|h6|ins|label|mark|p|small|span|strong|sub|sup|time`, `children`, `color=accent|danger|primary|secondary|success|tertiary|warning`, `lineClamp`, `strong`, `style`, `tabularNums`, `truncate`, `type=body|caption|code|control|display|section-label|title`

### Feedback

- [Alert](https://www.usefragments.com/components/alert) — Highlights information, warnings or errors inline, with context and a clear next action.
  Members: `Alert.Action`, `Alert.Actions`, `Alert.Body`, `Alert.Close`, `Alert.Content`, `Alert.Icon`, `Alert.Title` · Props: `children`, `onOpenChange`, `open`, `tone=danger|info|warning`
- [EmptyState](https://www.usefragments.com/components/emptystate) — Explains why an area is blank and offers the next step.
  Members: `EmptyState.Actions`, `EmptyState.Description`, `EmptyState.Icon`, `EmptyState.Title` · Props: `children`, `size=md|sm`
- [Loading](https://www.usefragments.com/components/loading) — Signals an indeterminate wait: a spinner, dots, a pulse, bars, a matrix or a shimmer.
  Members: `Loading.Screen` · Props: `delay`, `fill`, `inline`, `kind=bars|dots|matrix|pulse|shimmer|spinner`, `label`
- [Progress](https://www.usefragments.com/components/progress) — Shows how far along a task is, as one thin bar.
  Members: `Progress.Root` · Props: `formatValue`, `label`, `max`, `min`, `role`, `showValue`, `tone=accent|danger|neutral|warning`, `value`, `valueLabel`
- [Skeleton](https://www.usefragments.com/components/skeleton) — Holds the shape of content that has not arrived yet.
  Members: `Skeleton.Text` · Props: `fill`, `height`, `shape=avatar|control|heading|rect|row|text`, `size=lg|md|sm`, `style`, `width`
- [Toast](https://www.usefragments.com/components/toast) — Briefly reports an outcome without blocking the page, using an icon to convey tone.
  Members: `Toast.Provider` · Props: `action`, `busy`, `description`, `onDismiss`, `title`, `tone=danger|neutral|success|warning`

### Inputs

- [Checkbox](https://www.usefragments.com/components/checkbox) — Selects options that take effect when a form is submitted.
  Members: `Checkbox.Root` · Props: `aria-describedby`, `aria-label`, `aria-labelledby`, `checked`, `defaultChecked`, `disabled`, `errorMessage`, `form`, `helperText`, `id`, `indeterminate`, `inputRef`, `invalid`, `label`, `name`, `onCheckedChange`, `parent`, `readOnly`, `required`, `uncheckedValue`, `value`, `variant=outline`
- [Chip](https://www.usefragments.com/components/chip) — A compact value: a tag, a filter or an applied selection, in one untoned look.
  Members: `Chip.Group` · Props: `children`, `disabled`, `icon`, `onClick`, `onRemove`, `removeLabel`, `selected`, `type=button|reset|submit`, `value`
- [ColorPicker](https://www.usefragments.com/components/colorpicker) — Selects a color through a visual picker and hexadecimal input.
  Members: `ColorPicker.preload`, `ColorPicker.Root` · Props: `defaultValue`, `disabled`, `errorMessage`, `helperText`, `invalid`, `label`, `onValueChange`, `readOnly`, `size=md|sm`, `value`
- [Combobox](https://www.usefragments.com/components/combobox) — Filters a list of options as the user types.
  Members: `Combobox.Content`, `Combobox.Empty`, `Combobox.Group`, `Combobox.GroupLabel`, `Combobox.Input`, `Combobox.Item`, `Combobox.ItemIndicator`, `Combobox.Trigger` · Props: `autoComplete`, `autoHighlight`, `children`, `defaultOpen`, `defaultValue`, `disabled`, `form`, `inputRef`, `invalid`, `loading`, `multiple`, `name`, `onInputValueChange`, `onOpenChange`, `onValueChange`, `open`, `placeholder`, `readOnly`, `required`, `size=lg|md|sm|xs`, `value`
- [DatePicker](https://www.usefragments.com/components/datepicker) — Selects a date or date range from a calendar.
  Members: `DatePicker.Calendar`, `DatePicker.Content`, `DatePicker.preload`, `DatePicker.Preset`, `DatePicker.Root`, `DatePicker.Trigger` · Props: `children`, `className`, `defaultValue`, `disabled`, `disabledDates`, `errorMessage`, `format`, `helperText`, `invalid`, `label`, `locale`, `mode=range|single`, `name`, `numberOfMonths`, `onOpenChange`, `onValueChange`, `open`, `placeholder`, `readOnly`, `size=md|sm`, `value`
- [Editor](https://www.usefragments.com/components/editor) — Edits rich text with formatting, autosave, and a word count.
  Members: `Editor.Content`, `Editor.preload`, `Editor.Root`, `Editor.StatusBar`, `Editor.StatusIndicator`, `Editor.Toolbar`, `Editor.ToolbarButton`, `Editor.ToolbarGroup` · Props: `autoSaveInterval`, `children`, `defaultValue`, `disabled`, `errorMessage`, `formats`, `helperText`, `invalid`, `label`, `maxLength`, `onAutoSave`, `onValueChange`, `placeholder`, `readOnly`, `rows`, `statusBar`, `toolbar`, `value`
- [Field](https://www.usefragments.com/components/field) — Owns the label, description and error for one form control.
  Members: `Field.Control`, `Field.Description`, `Field.Error`, `Field.Label`, `Field.Required`, `Field.Validity` · Props: `children`, `disabled`, `invalid`, `name`, `validate`, `validationDebounceTime`, `validationMode=onBlur|onChange|onSubmit`
- [Fieldset](https://www.usefragments.com/components/fieldset) — Groups related form controls under an accessible legend, on a surface.
  Members: `Fieldset.Description`, `Fieldset.Legend` · Props: `children`, `disabled`
- [FilterBar](https://www.usefragments.com/components/filterbar) — Labelled filters on one line that fold behind one button when the line no longer fits.
  Members: `FilterBar.Item`, `FilterBar.Root` · Props: `activeCount`, `children`, `collapse=always|auto|never`, `doneLabel`, `label`, `onReset`, `resetLabel`, `size=lg|md|sm|xs`
- [Form](https://www.usefragments.com/components/form) — Groups fields and actions, routes server errors to fields, and disables fields while submission is pending.
  Members: `Form.Actions` · Props: `children`, `errors`, `onSubmit`, `pending`, `validationMode=onBlur|onChange|onSubmit`
- [Input](https://www.usefragments.com/components/input) — Collects single-line text, with search mode offering a clear button and live result count.
  Props: `className`, `count`, `defaultValue`, `disabled`, `endAdornment`, `invalid`, `onChange`, `onKeyDown`, `onValueChange`, `placeholder`, `readOnly`, `shortcut`, `size=lg|md|sm|xs`, `startAdornment`, `type=email|number|password|search|tel|text|url`, `value`
- [Listbox](https://www.usefragments.com/components/listbox) — Shows an inline, keyboard-navigable list of options with no trigger of its own.
  Members: `Listbox.Empty`, `Listbox.Group`, `Listbox.Item`, `Listbox.Root` · Props: `children`, `defaultValue`, `disabled`, `multiple`, `onValueChange`, `value`
- [NumberField](https://www.usefragments.com/components/numberfield) — Collects numeric values with arrow-key stepping, label scrubbing and optional units.
  Members: `NumberField.Root` · Props: `defaultValue`, `disabled`, `form`, `format`, `invalid`, `largeStep`, `max`, `min`, `name`, `onValueChange`, `onValueCommitted`, `readOnly`, `required`, `scrub`, `size=lg|md|sm|xs`, `step`, `unit`, `value`
- [RadioGroup](https://www.usefragments.com/components/radiogroup) — Selects one option from a mutually exclusive set.
  Members: `RadioGroup.Item` · Props: `children`, `defaultValue`, `disabled`, `errorMessage`, `form`, `helperText`, `id`, `inputRef`, `invalid`, `label`, `name`, `onValueChange`, `orientation=horizontal|vertical`, `readOnly`, `required`, `value`, `variant=outline`
- [Select](https://www.usefragments.com/components/select) — Opens a list and returns the single option the user picks.
  Members: `Select.Content`, `Select.Group`, `Select.GroupLabel`, `Select.Item`, `Select.Trigger` · Props: `autoComplete`, `children`, `defaultOpen`, `defaultValue`, `disabled`, `form`, `inputRef`, `invalid`, `name`, `onOpenChange`, `onValueChange`, `open`, `options`, `placeholder`, `readOnly`, `required`, `size=lg|md|sm|xs`, `value`
- [Slider](https://www.usefragments.com/components/slider) — Chooses a number, or a range with one thumb per value, along a track.
  Members: `Slider.Root` · Props: `aria-describedby`, `aria-label`, `aria-labelledby`, `defaultValue`, `disabled`, `errorMessage`, `form`, `format`, `getAriaLabel`, `helperText`, `id`, `invalid`, `label`, `largeStep`, `locale`, `max`, `min`, `name`, `onValueChange`, `onValueCommitted`, `readOnly`, `showValue`, `showValueOnDrag`, `size=lg|md|sm|xs`, `step`, `thumbAlignment=center|edge|edge-client-only`, `value`
- [Switch](https://www.usefragments.com/components/switch) — Toggles a setting that takes effect immediately.
  Members: `Switch.Root` · Props: `aria-describedby`, `aria-label`, `aria-labelledby`, `checked`, `className`, `defaultChecked`, `disabled`, `errorMessage`, `form`, `helperText`, `id`, `inputRef`, `invalid`, `label`, `name`, `onCheckedChange`, `readOnly`, `required`, `uncheckedValue`, `value`
- [Textarea](https://www.usefragments.com/components/textarea) — Collects multi-line text; grows with its text from minRows to maxRows, then scrolls.
  Members: `Textarea.Root` · Props: `className`, `defaultValue`, `disabled`, `invalid`, `maxLength`, `maxRows`, `minRows`, `name`, `onChange`, `onValueChange`, `placeholder`, `readOnly`, `required`, `resize=none|vertical`, `size=lg|md|sm|xs`, `style`, `value`

### Layout

- [Accordion](https://www.usefragments.com/components/accordion) — Stacks sections that expand one at a time, or several at once.
  Members: `Accordion.Content`, `Accordion.Item`, `Accordion.Trigger` · Props: `children`, `className`, `defaultValue`, `disabled`, `headingLevel=2|3|4|5|6`, `multiple`, `onValueChange`, `value`
- [AppShell](https://www.usefragments.com/components/appshell) — Frames the application with header, sidebar, main and optional aside regions, sharing sidebar state.
  Members: `AppShell.Aside`, `AppShell.Header`, `AppShell.Main`, `AppShell.Sidebar` · Props: `children`, `collapsed`, `collapsible=icon|none|offcanvas`, `defaultCollapsed`, `defaultOpen`, `enableKeyboardShortcut`, `layout=default|sidebar`, `onCollapsedChange`, `onOpenChange`, `open`
- [Box](https://www.usefragments.com/components/box) — Places content on a chosen plane with optional borders, corners and inset spacing.
  Members: `Box.Root` · Props: `as=article|aside|div|footer|header|main|nav|section|span`, `border=block-end|block-start|false|true`, `children`, `className`, `inset=compact|default|none`, `plane=band|canvas|raised|surface`, `radius=control|nested|none|surface`
- [Card](https://www.usefragments.com/components/card) — Groups related content onto one bounded surface.
  Members: `Card.Body`, `Card.Description`, `Card.Footer`, `Card.Header`, `Card.Title` · Props: `as=article|div|section`, `children`, `padding=md|none`, `render`, `selected`, `tone=danger|neutral`
- [Collapsible](https://www.usefragments.com/components/collapsible) — Shows or hides one region of content behind a trigger.
  Members: `Collapsible.Content`, `Collapsible.Root`, `Collapsible.Trigger` · Props: `children`, `className`, `defaultOpen`, `disabled`, `onOpenChange`, `open`
- [Grid](https://www.usefragments.com/components/grid) — Arranges items into responsive columns with one shared gap.
  Members: `Grid.Item`, `Grid.Root` · Props: `alignItems=center|end|start|stretch`, `children`, `className`, `columns=1|12|2|3|4|6|auto`, `gap=lg|md|none|sm|xl|xs`, `justifyItems=center|end|start|stretch`, `minChildWidth`, `style`
- [Header](https://www.usefragments.com/components/header) — Groups the brand, navigation, dropdowns, search, actions and navigation trigger in a top bar.
  Members: `Header.Actions`, `Header.Brand`, `Header.Nav`, `Header.NavItem`, `Header.NavMenu`, `Header.NavMenuItem`, `Header.Search`, `Header.SkipLink`, `Header.Trigger` · Props: `children`, `elevatedOnScroll`, `position=static|sticky`
- [Main](https://www.usefragments.com/components/main) — Defines the page region, title, content gutter, reading width and vertical rhythm.
  Members: `Main.Content`, `Main.Description`, `Main.Footer`, `Main.Header`, `Main.Title` · Props: `as=div|main|section`, `children`, `id`, `measure=full|narrow`
- [ScrollArea](https://www.usefragments.com/components/scrollarea) — Scrolls overflowing content with a slim scrollbar and optional edge fades.
  Members: `ScrollArea.Root` · Props: `aria-label`, `aria-labelledby`, `children`, `className`, `dir`, `orientation=both|horizontal|vertical`, `scrollbarVisibility=always|auto`, `showFades`
- [Separator](https://www.usefragments.com/components/separator) — Draws one hairline between sections of related content.
  Members: `Separator.Root` · Props: `label`, `length=control|full`, `orientation=horizontal|vertical`
- [Sidebar](https://www.usefragments.com/components/sidebar) — Navigates through a collapsible desktop rail that becomes a modal panel on smaller screens.
  Members: `Sidebar.CollapseToggle`, `Sidebar.Footer`, `Sidebar.Header`, `Sidebar.Item`, `Sidebar.MenuSkeleton`, `Sidebar.Nav`, `Sidebar.Provider`, `Sidebar.Section`, `Sidebar.SectionAction`, `Sidebar.SubItem`, `Sidebar.Submenu` · Props: `aria-label`, `children`, `collapsed`, `collapsible=icon|none|offcanvas`, `defaultCollapsed`, `defaultOpen`, `enableKeyboardShortcut`, `onCollapsedChange`, `onOpenChange`, `open`
- [Stack](https://www.usefragments.com/components/stack) — Stacks children in a row or column with one consistent gap.
  Members: `Stack.Root` · Props: `align=baseline|center|end|start|stretch`, `as=article|aside|div|footer|header|main|nav|ol|section|ul`, `children`, `className`, `collapseBelow`, `direction=column|row`, `divided`, `gap=lg|md|none|sm|xl|xs`, `justify=between|center|end|start`, `style`, `wrap`

### Navigation

- [Breadcrumbs](https://www.usefragments.com/components/breadcrumbs) — Shows where the user is and links back up the hierarchy.
  Members: `Breadcrumbs.Item` · Props: `children`, `label`, `maxItems`
- [Command](https://www.usefragments.com/components/command) — Filters and ranks commands as users type, with an optional floating palette.
  Members: `Command.Dialog`, `Command.Empty`, `Command.Error`, `Command.Group`, `Command.Input`, `Command.Item`, `Command.List`, `Command.Separator` · Props: `children`, `defaultSearch`, `filter`, `loop`, `onSearchChange`, `search`
- [Link](https://www.usefragments.com/components/link) — Navigates somewhere else, inline or in chrome, with real link semantics.
  Members: `Link.Root` · Props: `children`, `className`, `external`, `rel`, `render`, `style`, `target`, `tone=accent|neutral`
- [Pagination](https://www.usefragments.com/components/pagination) — Steps through content split across numbered pages.
  Members: `Pagination.Items`, `Pagination.Next`, `Pagination.Previous` · Props: `children`, `defaultPage`, `onPageChange`, `page`, `renderLink`, `siblingCount`, `size=md|sm`, `totalPages`
- [TableOfContents](https://www.usefragments.com/components/tableofcontents) — Indexes a long page and marks the section currently in view.
  Members: `TableOfContents.Group`, `TableOfContents.Item` · Props: `children`, `label`, `title`
- [Tabs](https://www.usefragments.com/components/tabs) — Swaps between sibling panels without leaving the page.
  Members: `Tabs.List`, `Tabs.Panel`, `Tabs.Tab` · Props: `children`, `defaultValue`, `onReselect`, `onValueChange`, `size=md|sm`, `value`, `variant=ghost|soft`

### Overlays

- [AlertDialog](https://www.usefragments.com/components/alertdialog) — Requests a required decision, focusing the safest answer and preventing dismissal by outside presses.
  Members: `AlertDialog.Action`, `AlertDialog.Body`, `AlertDialog.Cancel`, `AlertDialog.Content`, `AlertDialog.Description`, `AlertDialog.Footer`, `AlertDialog.Header`, `AlertDialog.Title`, `AlertDialog.Trigger` · Props: `children`, `defaultOpen`, `onOpenChange`, `open`
- [Dialog](https://www.usefragments.com/components/dialog) — Blocks the page with one focused task the user finishes or dismisses.
  Members: `Dialog.Body`, `Dialog.Close`, `Dialog.Content`, `Dialog.Description`, `Dialog.Footer`, `Dialog.Header`, `Dialog.Title`, `Dialog.Trigger` · Props: `children`, `defaultOpen`, `onOpenChange`, `open`
- [Drawer](https://www.usefragments.com/components/drawer) — Shows edge sheets for navigation or inspection, with focus management and swipe dismissal.
  Members: `Drawer.Body`, `Drawer.Close`, `Drawer.Content`, `Drawer.Description`, `Drawer.Footer`, `Drawer.Header`, `Drawer.SwipeArea`, `Drawer.Title`, `Drawer.Trigger` · Props: `children`, `defaultOpen`, `disablePointerDismissal`, `modal=false|trap-focus|true`, `onOpenChange`, `onOpenChangeComplete`, `open`, `snapPoints`
- [Menu](https://www.usefragments.com/components/menu) — Drops a list of actions below a trigger, driveable entirely by keyboard.
  Members: `Menu.CheckboxItem`, `Menu.Content`, `Menu.Group`, `Menu.GroupLabel`, `Menu.Item`, `Menu.RadioGroup`, `Menu.RadioItem`, `Menu.Separator`, `Menu.Submenu`, `Menu.SubmenuTrigger`, `Menu.Trigger` · Props: `children`, `defaultOpen`, `modal`, `onOpenChange`, `open`
- [Popover](https://www.usefragments.com/components/popover) — Anchors interactive content to a trigger without blocking the page.
  Members: `Popover.Body`, `Popover.Close`, `Popover.Content`, `Popover.Description`, `Popover.Footer`, `Popover.Title`, `Popover.Trigger` · Props: `children`, `defaultOpen`, `modal`, `onOpenChange`, `open`
- [Tooltip](https://www.usefragments.com/components/tooltip) — Shows a one-line hint when a control is hovered or focused.
  Members: `Tooltip.Provider` · Props: `align=center|end|start`, `children`, `closeDelay`, `closeOnClick`, `content`, `contentProps`, `defaultOpen`, `delay`, `disabled`, `onOpenChange`, `open`, `shortcut`, `side=bottom|left|right|top`

### Utilities

- [ComponentDefaults](https://www.usefragments.com/components/componentdefaults) — Utility provider that sets the default control size for every control below it.
  Props: `children`, `controlSize=lg|md|sm|xs`
- [Theme](https://www.usefragments.com/components/theme) — Sets color mode and theme inputs for the page or a nested subtree.
  Members: `Theme.Root`, `Theme.useTheme` · Props: `brand`, `children`, `className`, `danger`, `defaultMode=dark|light|system`, `font`, `info`, `mode=dark|light|system`, `neutral`, `onModeChange`, `pressScale`, `primaryChrome=accent|ink`, `radius`, `scale`, `storageKey`, `style`, `success`, `warning`
- [VisuallyHidden](https://www.usefragments.com/components/visuallyhidden) — Keeps text in the accessibility tree while taking it off the screen.
  Members: `VisuallyHidden.Root` · Props: `as=div|span`, `children`, `focusable`

## Blocks (3 blocks)

- **Activity Feed** — Recent actions as a list: square avatar, actor and action, a timestamp in ink 3
- **Login Form** — Email and password sign-in on a card, with a pending submit and footer links
- **Stats Card** — One metric: label, tabular value, an optional change badge and a neutral icon

## Standalone package tooling

These are entry points for the published @usefragments/cli package, independent of the desktop app. Use the desktop guide for the app's Checks workflow.

- `npx @usefragments/cli init` — Install local Fragments guardrails, agent hooks, and CI
- `npx @usefragments/cli doctor` — Prove the Fragments enforcement hook chain is armed
- `npx @usefragments/cli check` — Check source files for design-system drift
- `npx @usefragments/cli mcp` — Start the local MCP server with --stdio.

## Documentation

- https://www.usefragments.com/ — Fragments desktop, the main app; macOS only for now.
- https://www.usefragments.com/docs — Desktop setup and workflows.
- https://www.usefragments.com/docs/checks — Review design drift in the desktop app.
- https://www.usefragments.com/docs/troubleshooting — Recover from setup, server, agent, source, capture and Undo problems in the desktop app.
- https://www.usefragments.com/governance — Optional standalone package tooling.
- https://www.usefragments.com/governance/mcp — Local MCP tools from the published CLI.
- https://www.usefragments.com/governance/cli — Standalone CLI command reference.
- https://www.usefragments.com/components — Component examples, props, and usage guidance.
- https://www.usefragments.com/components/install — Package installation, providers, theming and optional copied-source commands.
- https://www.usefragments.com/components/accessibility — Keyboard patterns, labeling requirements, and app testing guidance.
- https://www.usefragments.com/pricing — Local work is free; paid plans are coming soon.
- https://www.usefragments.com/blog — Design-system and AI-tooling articles.

## Licensing

@usefragments/ui and @usefragments/core are MIT; @usefragments/cli is FSL-1.1-MIT (converts to MIT after two years)