# Components (/docs/reference/components)

Every installable 4AF component, generated directly from the registry.

The catalog contains **47 installable components**, generated from
`registry.json`, the file the published registry is built from.

Shared foundation items such as the theme, `cn`, `slot`, motion presets, and `use-action` are
installed as dependencies and aren't listed here.

## Actions

| Install name | Main API | What it provides |
| --- | --- | --- |
| [`button`](/docs/button) | `Button` | Six variants, eight sizes, optical icon alignment, and a loading state that doesn't resize. |
| [`button-group`](/docs/button-group) | `ButtonGroup` | Two or more Buttons joined into one control: flattened inner corners, one hairline per seam, horizontal or vertical. |
| [`toggle`](/docs/toggle) | `Toggle` | A button with a persistent pressed state and optional icon fill. |
| [`morph`](/docs/morph) | `Morph` | Animated content swap — icons or text. Copy to check, Follow to Following. |
| [`action-button`](/docs/action-button) | `ActionButton` | Runs an async action, shows pending/success/error, and reverts without resizing; pending can keep its label or show a centered loader only. |
| [`action-toggle`](/docs/action-toggle) | `ActionToggle` | A toggle that changes state after its action succeeds and preserves its previous state on failure. |
| [`copy-button`](/docs/copy-button) | `CopyButton` | Copies to the clipboard and confirms it — visually, and to screen readers. |
| [`delete-button`](/docs/delete-button) | `DeleteButton` | A destructive button that arms on the first press and confirms on the second, with Escape, blur, and timeout exits. |

## Fields and selection

| Install name | Main API | What it provides |
| --- | --- | --- |
| [`input`](/docs/input) | `Input` | A Base UI input with token-based surfaces, focus states, an optional leading icon, custom number steppers, and default, plain, and underline variants. |
| [`textarea`](/docs/textarea) | `Textarea` | A multiline text field with neutral or accent focus styling and an optional resize handle. |
| [`switch`](/docs/switch) | `Switch` | A switch that slides and grows a rounded center pill toward the track center when pressed. Adaptive or fixed thumb tone. |
| [`checkbox`](/docs/checkbox) | `Checkbox` | A checkbox whose tick draws itself in. Presses on click, not on hover. |
| [`radio`](/docs/radio) | `RadioGroup, Radio` | A radio group — the Checkbox's sibling, a single choice with a dot that scales in. |
| [`slider`](/docs/slider) | `Slider` | A slider whose thumb springs between steps and grabs while held, with optional range mode, ticks, labels, and a live value tooltip. Base UI behaviour. |
| [`select`](/docs/select) | `Select, SelectTrigger, SelectContent, SelectItem, SelectSortTrigger, submenu parts` | Single or multiple selection with optional search, nested options, and footer actions. |
| [`select-search`](/docs/select-search) | `SearchSelect and input/content/item parts` | A searchable single or multi-select on Base UI's Combobox — type to filter the list, with full keyboard and ARIA support. Multi-select keeps its animated checkbox list open while choices are toggled. |
| [`select-aligned`](/docs/select-aligned) | `AlignedSelect, AlignedSelectTrigger, AlignedSelectContent, AlignedSelectItem` | A single-select menu that aligns the selected option with its trigger when space and input method allow. |
| [`date-picker`](/docs/date-picker) | `DatePicker, DateRangePicker, Calendar` | Date and date-range fields with a desktop popover, mobile sheet, and standalone Calendar. |

## Feedback and status

| Install name | Main API | What it provides |
| --- | --- | --- |
| [`progress`](/docs/progress) | `Progress, ProgressLabel, ProgressValue` | A determinate progress bar. Base UI Progress behaviour; the fill slides on transform (translateX), never width, so it stays off the layout path. |
| [`alert`](/docs/alert) | `Alert` | An inline status line — a glyph plus a sentence, no surface. Destructive error (role=alert), amber warning, green success, neutral info, and a muted loading line with AsciiLoader by default. |
| [`badge`](/docs/badge) | `Badge, BadgeIconsProvider` | A status badge with animated content changes, optional icons or dots, and plain, solid, or outline styles. |
| [`skeleton`](/docs/skeleton) | `Skeleton` | A muted placeholder with square corners by default, shaped by utility classes. Pulses while content loads; reduced motion disables the pulse. |
| [`empty`](/docs/empty) | `Empty and composition parts` | An empty state — a centred column of media, title, description and an action. Composable parts; borderless by default with an optional dashed placeholder outline. |
| [`text-shimmer`](/docs/text-shimmer) | `TextShimmer` | Text with a highlight sweeping across it — a looping working-in-progress affordance. Gradient clipped to the glyphs, switched off (not sped up) under reduced motion. |
| [`scramble-text`](/docs/scramble-text) | `ScrambleText` | A short random-character reveal for text that is appearing or changing, with whitespace preservation and reduced-motion support. |
| [`ascii-loader`](/docs/ascii-loader) | `AsciiLoader` | A looping braille spinner for compact async status affordances. |
| [`matrix-loader`](/docs/matrix-loader) | `MatrixLoader` | A 4×4 matrix dot loader with scan, twinkle, and size variants. |
| [`classic-loader`](/docs/classic-loader) | `ClassicLoader` | Twelve fading radial bars adapted from loading.dev, with CSS-only motion, size variants, and speed control. |

## Navigation and layout

| Install name | Main API | What it provides |
| --- | --- | --- |
| [`breadcrumb`](/docs/breadcrumb) | `Breadcrumb, BreadcrumbList, item/link/page/separator parts, BreadcrumbEllipsis, BreadcrumbCollapse` | A breadcrumb trail with links, separators, and expandable middle items. |
| [`tabs`](/docs/tabs) | `Tabs, TabsList, TabsTab, TabsCount, TabsPanel` | Segment, pill, or underline tabs with an animated indicator, optional counts, and horizontal scrolling. |
| [`collapsible`](/docs/collapsible) | `Collapsible, CollapsibleTrigger, CollapsibleContent` | A disclosure row built on Base UI Collapsible: the chevron rotates, the space slides open so the rows below travel rather than jump, and the content fades in out of a blur where it lands. |
| [`table`](/docs/table) | `Table, TableCaption, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell` | A presentational semantic table with a composable caption, two densities, optional grid lines, a pinned header, and a loading skeleton state. It has no controls and no state; install data-table for selection, sorting and row actions. |
| [`data-table`](/docs/data-table) | `DataTable, DataTableRow, DataTableHead, DataTableRowActions, and the re-exported table layout parts` | A table with row selection, sort controls, bulk actions, and row menus. The caller orders the data. |
| [`table-of-contents`](/docs/table-of-contents) | `TableOfContents` | A table of contents that tracks visible headings, keeps the last passed section active through long prose, and offers spanning or single-heading markers. |
| [`table-of-contents-lines`](/docs/table-of-contents-lines) | `TableOfContentsLines` | A line-based table of contents where each heading has a longer rule and two shorter content rules, with a highlighted, expanding hover treatment. |
| [`separator`](/docs/separator) | `Separator` | An accessible horizontal or vertical divider built on Base UI Separator. |
| [`command-palette`](/docs/command-palette) | `CommandPalette, panel/list/row/tab/footer parts, Kbd, useCommandSearch, useCommandPanelHighlight` | A keyboard-first command and search palette with nested panels, custom panel content, fuzzy filtering, async/server-driven and paginated search, keybind hints, panel tab bars with Tab/Shift+Tab switching, and Base UI dialog/autocomplete behavior. |
| [`sidebar`](/docs/sidebar) | `SidebarProvider, Sidebar, SidebarPanel, SidebarHeaderButton, menu/group/submenu parts` | A collapsible application sidebar with default, floating, inset, and split layouts, animated split-rail icon tooltips, collapsible rows with built-in chevrons, nested rows, actions, badges, and loading skeletons. |
| [`sidebar-layout`](/docs/sidebar-layout) | `SidebarLayout` | An optional viewport shell that composes Sidebar with a contained, independently scrolling inset surface, page title header, header actions, and a left-aligned collapse trigger before the title. |

## Overlays and menus

| Install name | Main API | What it provides |
| --- | --- | --- |
| [`tooltip`](/docs/tooltip) | `TooltipProvider, Tooltip` | Base UI positioning and timing with a CSS scale-and-blur enter. Opens on hover and focus, flips at the viewport edge. |
| [`sheet`](/docs/sheet) | `Sheet and composition parts` | A dialog that slides in from an edge. Base UI Dialog behaviour, Motion enter/exit. |
| [`dialog`](/docs/dialog) | `Dialog and composition parts, DialogSteps, DialogStep` | A modal centred over the page. Base UI Dialog behaviour; scales in from a blur and fades out with Motion. |
| [`alert-dialog`](/docs/alert-dialog) | `AlertDialog and composition parts` | A confirmation dialog that blocks backdrop dismissal. Escape and close controls dismiss it. |
| [`popover`](/docs/popover) | `Popover and composition parts` | An interactive panel anchored to a trigger. Base UI Popover behaviour with a CSS scale-and-blur enter from the trigger edge. |
| [`selection-toolbar`](/docs/selection-toolbar) | `SelectionToolbar, item parts, useSelectionToolbar` | A floating toolbar for selected text, with action buttons, async actions, and toggles. |
| [`hover-card`](/docs/hover-card) | `HoverCard, HoverCardTrigger, HoverCardContent, HoverCardSkeleton` | A rich preview of what is behind a link, on hover and focus. Base UI PreviewCard behaviour with a CSS scale-and-blur enter from the trigger edge, plus a built-in loading skeleton. |
| [`dropdown-menu`](/docs/dropdown-menu) | `DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSelect, checkbox/radio/submenu parts` | A dropdown menu on Base UI Menu (keyboard nav, submenus, checkbox/radio items, searchable selection panels, and immediate disabled-reason tooltips). Instant row highlight; CSS scale-and-blur panel enter. |