# Layout UI

Token-contracted, reskinnable React component system built for AI coding agents. 54 components on Base UI primitives, every component ships machine-readable usage rules. Themes compile from real company design systems. Layout UI is shadcn-compatible: install via the shadcn CLI (`npx shadcn add @layout/<name>` with registry at https://ui.staging.layout.design/r/{name}.json) or by direct URL. Every component carries machine-readable `meta.usage`, `meta.never`, and `meta.tokens` rules in its registry JSON, readable by AI coding agents via the Layout MCP server (`@layoutdesign/context`). Themes use `data-brand`, `data-theme`, and `data-density` attributes; the shadcn fallback chain means existing shadcn themes are respected automatically.

## Docs

- [Introduction](https://ui.staging.layout.design/docs): What Layout UI is, the three principles, and quick links.
- [Installation](https://ui.staging.layout.design/docs/installation): Adding components to your project via the shadcn registry CLI.
- [Next.js](https://ui.staging.layout.design/docs/installation/next): Installation guide for Next.js projects.
- [Vite](https://ui.staging.layout.design/docs/installation/vite): Installation guide for Vite projects.
- [Astro](https://ui.staging.layout.design/docs/installation/astro): Installation guide for Astro projects.
- [React Router](https://ui.staging.layout.design/docs/installation/react-router): Installation guide for React Router projects.
- [TanStack Start](https://ui.staging.layout.design/docs/installation/tanstack): Installation guide for TanStack Start projects.
- [Laravel](https://ui.staging.layout.design/docs/installation/laravel): Installation guide for Laravel + Inertia projects.
- [Theming](https://ui.staging.layout.design/docs/theming): Token contract, dark mode, brands, density, and shadcn compat.
- [For AI agents](https://ui.staging.layout.design/docs/ai-agents): Registry meta, layout.md context files, and the Layout MCP server.
- [Create your theme](https://ui.staging.layout.design/create): Interactive theme builder to generate a custom Layout UI brand.

## Components

- [Accordion](https://ui.staging.layout.design/docs/components/accordion): Vertically stacked collapsible sections built on Base UI Accordion. The chevron rotates on open via data-[panel-open]. Supports single or multiple open items via the openMultiple prop.
  Registry JSON: https://ui.staging.layout.design/r/accordion.json
- [Alert](https://ui.staging.layout.design/docs/components/alert): Inline callout with default, destructive, success and warning variants.
  Registry JSON: https://ui.staging.layout.design/r/alert.json
- [Alert Dialog](https://ui.staging.layout.design/docs/components/alert-dialog): Interruption dialog for irreversible or high-stakes actions. Built on Base UI AlertDialog with ARIA alertdialog role. Action button styled as default, cancel as outline.
  Registry JSON: https://ui.staging.layout.design/r/alert-dialog.json
- [Aspect Ratio](https://ui.staging.layout.design/docs/components/aspect-ratio): Pure CSS aspect-ratio wrapper. Server-compatible with no client JavaScript required.
  Registry JSON: https://ui.staging.layout.design/r/aspect-ratio.json
- [Avatar](https://ui.staging.layout.design/docs/components/avatar): User avatar with image, fallback initials, and graceful error handling. Built on Base UI Avatar.
  Registry JSON: https://ui.staging.layout.design/r/avatar.json
- [Badge](https://ui.staging.layout.design/docs/components/badge): Status and metadata label with six variants including success and warning.
  Registry JSON: https://ui.staging.layout.design/r/badge.json
- [Breadcrumb](https://ui.staging.layout.design/docs/components/breadcrumb): A server-compatible breadcrumb trail showing the user's location within a hierarchy. BreadcrumbSeparator accepts a custom icon child; BreadcrumbEllipsis collapses long paths.
  Registry JSON: https://ui.staging.layout.design/r/breadcrumb.json
- [Button](https://ui.staging.layout.design/docs/components/button): Button with six intent variants and four sizes. Polymorphic via the Base UI render prop.
  Registry JSON: https://ui.staging.layout.design/r/button.json
- [Button Group](https://ui.staging.layout.design/docs/components/button-group): Wrapper that visually fuses adjacent Button children into a single segmented control, collapsing inner borders and radii. Server-compatible.
  Registry JSON: https://ui.staging.layout.design/r/button-group.json
- [Calendar](https://ui.staging.layout.design/docs/components/calendar): Date-picker calendar built on react-day-picker v10, styled with semantic tokens. Supports single, multiple, and range selection modes.
  Registry JSON: https://ui.staging.layout.design/r/calendar.json
- [Card](https://ui.staging.layout.design/docs/components/card): Surface container family: header, title, description, action, content, footer.
  Registry JSON: https://ui.staging.layout.design/r/card.json
- [Carousel](https://ui.staging.layout.design/docs/components/carousel): Accessible carousel built on Embla Carousel with keyboard arrow-key navigation. Exports Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, and the useCarousel context hook.
  Registry JSON: https://ui.staging.layout.design/r/carousel.json
- [Chart](https://ui.staging.layout.design/docs/components/chart): shadcn-style chart kit built on Recharts. ChartContainer scopes series colours as --color-<key> CSS custom properties. ChartTooltip and ChartTooltipContent render token-styled tooltips. ChartLegend and ChartLegendContent render colour-dotted legend rows. Pair with any Recharts chart type.
  Registry JSON: https://ui.staging.layout.design/r/chart.json
- [Checkbox](https://ui.staging.layout.design/docs/components/checkbox): Accessible checkbox with checked, unchecked and indeterminate states. Built on Base UI Checkbox with a Lucide Check indicator.
  Registry JSON: https://ui.staging.layout.design/r/checkbox.json
- [Collapsible](https://ui.staging.layout.design/docs/components/collapsible): A single show/hide panel built on Base UI Collapsible. Lower-level than Accordion; use when you need one independent collapsible section without the header/item structure.
  Registry JSON: https://ui.staging.layout.design/r/collapsible.json
- [Combobox](https://ui.staging.layout.design/docs/components/combobox): Searchable select built on Base UI Combobox. Type to filter a fixed list; shows an empty state when no items match. Check indicator on selected item.
  Registry JSON: https://ui.staging.layout.design/r/combobox.json
- [Context Menu](https://ui.staging.layout.design/docs/components/context-menu): A menu triggered by right-click or long-press on a target area, built on Base UI ContextMenu. Shares the same item family as DropdownMenu.
  Registry JSON: https://ui.staging.layout.design/r/context-menu.json
- [Data Table](https://ui.staging.layout.design/docs/components/data-table): Full-featured data table built on TanStack Table v8: sortable columns, column filter input, row selection with checkboxes, and Previous/Next pagination. Composed from the Table family, Input, Button, and Checkbox primitives.
  Registry JSON: https://ui.staging.layout.design/r/data-table.json
- [Date Picker](https://ui.staging.layout.design/docs/components/date-picker): Composed date-picker pattern: a Popover-wrapped Button trigger with a Calendar inside. Exports DatePicker (single) and DateRangePicker (range). Not a primitive — installs Calendar, Popover, and Button as dependencies.
  Registry JSON: https://ui.staging.layout.design/r/date-picker.json
- [Dialog](https://ui.staging.layout.design/docs/components/dialog): Modal dialog with backdrop, centred popup, header, footer, and close button. Built on Base UI Dialog.
  Registry JSON: https://ui.staging.layout.design/r/dialog.json
- [Drawer](https://ui.staging.layout.design/docs/components/drawer): Bottom sheet with native drag-to-dismiss. Built on Base UI Drawer. Includes a drag handle bar and swipe gesture support.
  Registry JSON: https://ui.staging.layout.design/r/drawer.json
- [Dropdown Menu](https://ui.staging.layout.design/docs/components/dropdown-menu): A menu anchored to a trigger button, built on Base UI Menu. Supports groups, labels, separators, keyboard shortcuts, checkboxes, radio groups, sub-menus, and a destructive item variant.
  Registry JSON: https://ui.staging.layout.design/r/dropdown-menu.json
- [Empty](https://ui.staging.layout.design/docs/components/empty): Empty state component family with icon media, title, description, and CTA slot. Server-compatible plain markup.
  Registry JSON: https://ui.staging.layout.design/r/empty.json
- [Field](https://ui.staging.layout.design/docs/components/field): Form field wrapper with automatic label association, description, and validation error display. Built on Base UI Field. Works without react-hook-form.
  Registry JSON: https://ui.staging.layout.design/r/field.json
- [Hover Card](https://ui.staging.layout.design/docs/components/hover-card): Rich preview card that appears on hover. Built on Base UI PreviewCard. Use for user profiles, repository previews, and link context. Dismissed when the pointer leaves.
  Registry JSON: https://ui.staging.layout.design/r/hover-card.json
- [Input](https://ui.staging.layout.design/docs/components/input): Text input with focus ring and aria-invalid error styling from the token contract.
  Registry JSON: https://ui.staging.layout.design/r/input.json
- [Input Group](https://ui.staging.layout.design/docs/components/input-group): Compound input with leading and trailing addons inside a single bordered shell. Supports text labels, icons, and action buttons at any edge.
  Registry JSON: https://ui.staging.layout.design/r/input-group.json
- [Input OTP](https://ui.staging.layout.design/docs/components/input-otp): One-time password input with individual character slots, grouping, and separator support. Built on Base UI OTPField.
  Registry JSON: https://ui.staging.layout.design/r/input-otp.json
- [Item](https://ui.staging.layout.design/docs/components/item): Flexible list item family with media, content, and actions slots. Three variants: default, outline, and muted. Server-compatible plain markup.
  Registry JSON: https://ui.staging.layout.design/r/item.json
- [Kbd](https://ui.staging.layout.design/docs/components/kbd): Keyboard shortcut hint, with KbdGroup for sequences.
  Registry JSON: https://ui.staging.layout.design/r/kbd.json
- [Label](https://ui.staging.layout.design/docs/components/label): Form label with peer-disabled handling.
  Registry JSON: https://ui.staging.layout.design/r/label.json
- [Menubar](https://ui.staging.layout.design/docs/components/menubar): A horizontal bar of menus typical of desktop-style application toolbars, built on Base UI Menubar and Menu. Supports multiple top-level menus each with full dropdown content including checkboxes, radio groups, and sub-menus.
  Registry JSON: https://ui.staging.layout.design/r/menubar.json
- [Native Select](https://ui.staging.layout.design/docs/components/native-select): A styled native <select> with a Chevron indicator. Same field chrome as Input. Use when a custom dropdown is unnecessary.
  Registry JSON: https://ui.staging.layout.design/r/native-select.json
- [Navigation Menu](https://ui.staging.layout.design/docs/components/navigation-menu): A horizontal navigation bar with hover-triggered popover panels for rich content areas, built on Base UI NavigationMenu. Exports navigationMenuTriggerStyle for styling standalone link items consistently.
  Registry JSON: https://ui.staging.layout.design/r/navigation-menu.json
- [Pagination](https://ui.staging.layout.design/docs/components/pagination): Server-compatible pagination controls. Page links use buttonVariants for consistent sizing and hover states. PaginationEllipsis handles collapsed page ranges.
  Registry JSON: https://ui.staging.layout.design/r/pagination.json
- [Popover](https://ui.staging.layout.design/docs/components/popover): Anchored floating panel for contextual controls and forms. Built on Base UI Popover with automatic collision detection. Accepts side and align props.
  Registry JSON: https://ui.staging.layout.design/r/popover.json
- [Progress](https://ui.staging.layout.design/docs/components/progress): Determinate and indeterminate progress bar built on Base UI Progress. Accessible with ARIA role=progressbar.
  Registry JSON: https://ui.staging.layout.design/r/progress.json
- [Radio Group](https://ui.staging.layout.design/docs/components/radio-group): A set of mutually exclusive radio buttons. Built on Base UI Radio Group and Radio with a filled circle indicator.
  Registry JSON: https://ui.staging.layout.design/r/radio-group.json
- [Resizable](https://ui.staging.layout.design/docs/components/resizable): Drag-to-resize panels built on react-resizable-panels. Exports ResizablePanelGroup (orientation, layout), ResizablePanel (defaultSize, minSize, collapsible), and ResizableHandle (optional withHandle grip icon).
  Registry JSON: https://ui.staging.layout.design/r/resizable.json
- [Scroll Area](https://ui.staging.layout.design/docs/components/scroll-area): Custom-styled scrollable container with thin border-coloured scrollbar. Built on Base UI Scroll Area.
  Registry JSON: https://ui.staging.layout.design/r/scroll-area.json
- [Select](https://ui.staging.layout.design/docs/components/select): Accessible single-value select built on Base UI Select. Trigger styled like Input with chevron icon; popup with group labels, separators, and check indicators.
  Registry JSON: https://ui.staging.layout.design/r/select.json
- [Separator](https://ui.staging.layout.design/docs/components/separator): Horizontal or vertical rule built on the Base UI Separator primitive.
  Registry JSON: https://ui.staging.layout.design/r/separator.json
- [Sheet](https://ui.staging.layout.design/docs/components/sheet): Slide-in panel from any screen edge. Built on Base UI Dialog with directional slide animations. Supports top, right, bottom, and left sides.
  Registry JSON: https://ui.staging.layout.design/r/sheet.json
- [Skeleton](https://ui.staging.layout.design/docs/components/skeleton): Loading placeholder that mirrors the shape of incoming content.
  Registry JSON: https://ui.staging.layout.design/r/skeleton.json
- [Slider](https://ui.staging.layout.design/docs/components/slider): A draggable range slider. Supports single values and multi-thumb ranges. Built on Base UI Slider.
  Registry JSON: https://ui.staging.layout.design/r/slider.json
- [Spinner](https://ui.staging.layout.design/docs/components/spinner): Indeterminate loading indicator (lucide Loader2).
  Registry JSON: https://ui.staging.layout.design/r/spinner.json
- [Switch](https://ui.staging.layout.design/docs/components/switch): A pill-shaped toggle for binary on/off settings. Built on Base UI Switch with a sliding thumb.
  Registry JSON: https://ui.staging.layout.design/r/switch.json
- [Table](https://ui.staging.layout.design/docs/components/table): Presentational data table family with hover rows and caption support.
  Registry JSON: https://ui.staging.layout.design/r/table.json
- [Tabs](https://ui.staging.layout.design/docs/components/tabs): Accessible tab interface built on Base UI Tabs. The list has a muted pill background; the active trigger lifts to background with a shadow. Supports controlled and uncontrolled modes.
  Registry JSON: https://ui.staging.layout.design/r/tabs.json
- [Textarea](https://ui.staging.layout.design/docs/components/textarea): Multi-line input sharing the Input field chrome.
  Registry JSON: https://ui.staging.layout.design/r/textarea.json
- [Toast](https://ui.staging.layout.design/docs/components/toast): Imperative notification system using Base UI Toast. Exports Toaster (mount once) and toast() (call anywhere). Supports default, success, warning, and destructive variants with optional action buttons.
  Registry JSON: https://ui.staging.layout.design/r/toast.json
- [Toggle](https://ui.staging.layout.design/docs/components/toggle): A two-state button that switches between pressed and unpressed. Built on Base UI Toggle with default and outline variants.
  Registry JSON: https://ui.staging.layout.design/r/toggle.json
- [Toggle Group](https://ui.staging.layout.design/docs/components/toggle-group): A group of related toggles sharing variant and size context. Built on Base UI ToggleGroup. Uses toggleVariants from the Toggle component.
  Registry JSON: https://ui.staging.layout.design/r/toggle-group.json
- [Tooltip](https://ui.staging.layout.design/docs/components/tooltip): Short label that appears on hover or focus. Built on Base UI Tooltip. Styled with bg-primary/text-primary-foreground for high contrast. Wrap usage in TooltipProvider.
  Registry JSON: https://ui.staging.layout.design/r/tooltip.json

## Registry

- [Registry index](https://ui.staging.layout.design/r/registry.json): Full shadcn-compatible registry manifest for all 54 components.
- [Default theme](https://ui.staging.layout.design/r/theme-layout.json): Layout UI default theme: warm neutrals, near-black primary, 10 px radius, plus extended --layout-* tokens (success, warning, shadows, motion).

## Optional

- [layout.design](https://layout.design): Extract design tokens from any Figma file or website. Generates layout.md context kits and CSS brand blocks for use with Layout UI.
- [GitHub](https://github.com/uselayout/ui): Source code for Layout UI components and the registry.