Component catalog
Everything on this page below the introduction is generated from the canonical product
contract (registry/registry.json), the same data llui list, llui add and the
Component Gallery read. Nothing here is counted or listed by
hand, so it cannot disagree with what ships.
The product contract lists 95 components. @llui/components/<name> imports a component's headless machine (behaviour, state, ARIA) when it has one; llui add <name> copies styled source into your app. They are different artifacts, and a component may have either, both, or names that differ between the two.
| Kind | Components | Headless import | Copied by llui add |
|---|---|---|---|
| machine | 69 | 69 | 64 |
| pattern | 6 | 6 | 3 |
| presentational | 19 | none, by design | 19 |
| skin, app-owned state | 1 | none, by design | 1 |
| all | 95 | 75 | 89 add names, 6 aliases among them |
Every component below has a stable page in the Component Gallery, rendered on the Baseline theme and Registry skins paths in isolated documents.
Two surfaces, two artifacts
A component can reach your app in two different ways, and they are not interchangeable:
import … from '@llui/components/<name>'imports the headless machine:init,update,connect(andoverlayfor overlays). It owns state, keyboard handling, ARIA, focus and dismissal, and emitsdata-scope/data-part/data-stateattributes but never a class. It is a package dependency: upgrades arrive with@llui/components.llui add <name>copies source into your project: a styled adapter (a skin) over a machine's parts, a presentational element, or the adapter of a composed pattern. The copy is yours to edit, and it uses Tailwind v4 utilities.
Some add targets compose a machine (every skin and pattern adapter spreads a machine's part
bags); some intentionally do not (a presentational button has no state, so there is no
machine to invent). Some machines have nothing to copy at all — you style them with the
Baseline theme or your own CSS. And an add name can differ from the import name: the tables
below list every case, so you never have to guess from a shared name.
The two styling paths are independent: the Baseline theme is ordinary CSS from
@llui/components/styles/theme.css with no Tailwind, and Registry skins are the copied
Tailwind v4 source. Pick one per app — see Styling. The Component Gallery renders
both paths, each in its own isolated document.
Coverage per path uses the contract's vocabulary: styled (the path supplies the complete visual treatment), partial (it styles what it can and names the boundary it leaves to you — the gallery shows the rationale), composed (the path styles it by composing other components), styleless (a behaviour-only machine with no surface to paint) and — (not applicable: there is nothing on that path, e.g. a presentational item has no machine to style with the Baseline theme).
| Coverage | Baseline theme | Registry skins |
|---|---|---|
| styled | 61 | 81 |
| partial | 8 | 6 |
| composed | 0 | 4 |
| styleless | 7 | 4 |
| not applicable (—) | 19 | 0 |
Every component
The Headless import links to the machine's API reference; Gallery opens its deterministic scenarios.
Controls
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Accordion (accordion) |
machine | @llui/components/accordion |
accordion |
styled | styled | open |
Angle Slider (angle-slider) |
machine | @llui/components/angle-slider |
angle-slider |
partial | partial | open |
Button (button) |
presentational | — | button |
— | styled | open |
Button Group (button-group) |
presentational | — | button-group |
— | styled | open |
Checkbox (checkbox) |
machine | @llui/components/checkbox |
checkbox |
styled | styled | open |
Chip (chip) |
presentational | — | chip |
styled | styled | open |
Clipboard (clipboard) |
machine | @llui/components/clipboard |
clipboard |
styled | styled | open |
Collapsible (collapsible) |
machine | @llui/components/collapsible |
collapsible |
styled | styled | open |
Color Picker (color-picker) |
machine | @llui/components/color-picker |
color-picker |
styled | styled | open |
Editable (editable) |
machine | @llui/components/editable |
editable |
styled | styled | open |
Gradient Picker (gradient-picker) |
machine | @llui/components/gradient-picker |
gradient-picker |
styled | styled | open |
Listbox (listbox) |
machine | @llui/components/listbox |
— | styled | styleless | open |
Number Input (number-input) |
machine | @llui/components/number-input |
number-input |
styled | styled | open |
Password Input (password-input) |
machine | @llui/components/password-input |
password-input |
styled | styled | open |
Pin Input (pin-input) |
machine | @llui/components/pin-input |
input-otp (alias) |
styled | styled | open |
Radio Group (radio-group) |
machine | @llui/components/radio-group |
radio-group |
styled | styled | open |
Rating Group (rating-group) |
machine | @llui/components/rating-group |
rating-group |
styled | styled | open |
Search Field (search-field) |
machine | @llui/components/search-field |
search-field |
styleless | styled | open |
Select (select) |
machine | @llui/components/select |
select |
styled | styled | open |
Slider (slider) |
machine | @llui/components/slider |
slider |
styled | styled | open |
Switch (switch) |
machine | @llui/components/switch |
switch |
styled | styled | open |
Tags Input (tags-input) |
machine | @llui/components/tags-input |
tags-input |
styled | styled | open |
Theme Switch (theme-switch) |
machine | @llui/components/theme-switch |
theme-switch |
styleless | styled | open |
Time Picker (time-picker) |
machine | @llui/components/time-picker |
time-picker |
styled | styled | open |
Timer (timer) |
machine | @llui/components/timer |
timer |
styled | styled | open |
Toggle (toggle) |
machine | @llui/components/toggle |
toggle |
styled | styled | open |
Toggle Group (toggle-group) |
machine | @llui/components/toggle-group |
toggle-group |
styled | styled | open |
Forms
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Cascade Select (cascade-select) |
machine | @llui/components/cascade-select |
cascade-select |
styled | styled | open |
Combobox (combobox) |
machine | @llui/components/combobox |
combobox |
styled | styled | open |
Date Input (date-input) |
machine | @llui/components/date-input |
date-input |
styled | styled | open |
Date Picker (date-picker) |
machine | @llui/components/date-picker |
calendar, date-picker |
styled | styled | open |
Field (field) |
machine | @llui/components/field |
field |
styled | styled | open |
Fieldset (fieldset) |
machine | @llui/components/fieldset |
— | styled | styleless | open |
File Upload (file-upload) |
machine | @llui/components/file-upload |
file-upload |
styled | styled | open |
Form (form) |
machine | @llui/components/form |
— | styled | composed from form-field |
open |
Input (input) |
presentational | — | input |
— | styled | open |
Input Group (input-group) |
presentational | — | input-group |
— | styled | open |
Label (label) |
presentational | — | label |
— | styled | open |
Textarea (textarea) |
presentational | — | textarea |
— | styled | open |
Navigation
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Breadcrumbs (breadcrumbs) |
machine | @llui/components/breadcrumbs |
breadcrumb (alias) |
styled | styled | open |
Menu (menu) |
machine | @llui/components/menu |
dropdown-menu (alias) |
styled | styled | open |
Menubar (menubar) |
machine | @llui/components/menubar |
menubar |
styleless | styled | open |
Navigation Menu (navigation-menu) |
machine | @llui/components/navigation-menu |
navigation-menu |
styleless | styled | open |
Pagination (pagination) |
machine | @llui/components/pagination |
pagination |
styled | styled | open |
Tabs (tabs) |
machine | @llui/components/tabs |
tabs |
styled | styled | open |
Table of Contents (toc) |
machine | @llui/components/toc |
toc |
styled | styled | open |
Toolbar (toolbar) |
machine | @llui/components/toolbar |
toolbar |
styleless | styled | open |
Tree View (tree-view) |
machine | @llui/components/tree-view |
tree-view |
styled | styled | open |
Overlays
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Alert Dialog (alert-dialog) |
machine | @llui/components/alert-dialog |
alert-dialog |
styled | styled | open |
Context Menu (context-menu) |
machine | @llui/components/context-menu |
context-menu |
styled | styled | open |
Dialog (dialog) |
machine | @llui/components/dialog |
dialog |
styled | styled | open |
Drawer (drawer) |
machine | @llui/components/drawer |
drawer, sheet |
styled | styled | open |
Floating Panel (floating-panel) |
machine | @llui/components/floating-panel |
floating-panel |
styled | styled | open |
Hover Card (hover-card) |
machine | @llui/components/hover-card |
hover-card |
styled | styled | open |
Popover (popover) |
machine | @llui/components/popover |
popover |
styled | styled | open |
Tooltip (tooltip) |
machine | @llui/components/tooltip |
tooltip |
styled | styled | open |
Tour (tour) |
machine | @llui/components/tour |
tour |
partial | partial | open |
Feedback
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Alert (alert) |
presentational | — | alert |
— | styled | open |
Async List (async-list) |
machine | @llui/components/async-list |
async-list |
styled | styled | open |
Empty (empty) |
presentational | — | empty |
— | styled | open |
Meter (meter) |
machine | @llui/components/meter |
meter |
styled | styled | open |
Progress (progress) |
machine | @llui/components/progress |
progress |
styled | styled | open |
Skeleton (skeleton) |
presentational | — | skeleton |
— | styled | open |
Spinner (spinner) |
presentational | — | spinner |
— | styled | open |
Toast (toast) |
machine | @llui/components/toast |
sonner (alias) |
styled | styled | open |
Data display
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Avatar (avatar) |
machine | @llui/components/avatar |
avatar |
styled | styled | open |
Badge (badge) |
presentational | — | badge |
— | styled | open |
Carousel (carousel) |
machine | @llui/components/carousel |
carousel |
styled | styled | open |
Chart (chart) |
machine | @llui/components/chart |
chart |
styled | styled | open |
Kbd (kbd) |
presentational | — | kbd |
— | styled | open |
Marquee (marquee) |
machine | @llui/components/marquee |
marquee |
partial | partial | open |
QR Code (qr-code) |
machine | @llui/components/qr-code |
qr-code |
styled | styled | open |
Sparkline (sparkline) |
machine | @llui/components/sparkline |
sparkline |
styled | styled | open |
Table (table) |
machine | @llui/components/table |
table |
styled | styled | open |
Typography (typography) |
presentational | — | typography |
— | styled | open |
Layout
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Aspect Ratio (aspect-ratio) |
presentational | — | aspect-ratio |
— | styled | open |
Card (card) |
presentational | — | card |
— | styled | open |
Item (item) |
presentational | — | item |
— | styled | open |
Scroll Area (scroll-area) |
machine | @llui/components/scroll-area |
scroll-area |
styled | styled | open |
Separator (separator) |
presentational | — | separator |
— | styled | open |
Sidebar (sidebar) |
skin, app-owned state | — | sidebar |
— | styled | open |
Sortable (sortable) |
machine | @llui/components/sortable |
sortable |
styled | styled | open |
Splitter (splitter) |
machine | @llui/components/splitter |
resizable (alias) |
styled | styled | open |
Steps (steps) |
machine | @llui/components/steps |
steps |
styled | styled | open |
Media
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Image Cropper (image-cropper) |
machine | @llui/components/image-cropper |
image-cropper |
styled | styled | open |
Signature Pad (signature-pad) |
machine | @llui/components/signature-pad |
signature-pad |
partial | partial | open |
Patterns
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Command Menu (command-menu) |
pattern | @llui/components/patterns/command-menu |
command (alias) |
partial | styled | open |
Confirm Dialog (confirm-dialog) |
pattern | @llui/components/patterns/confirm-dialog |
— | styled | composed from alert-dialog, button |
open |
Data Table (data-table) |
pattern | @llui/components/patterns/data-table |
data-table |
partial | partial | open |
Form Field (form-field) |
pattern | @llui/components/patterns/form-field |
form |
styled | styled | open |
Searchable Select (searchable-select) |
pattern | @llui/components/patterns/searchable-select |
— | partial | composed from select, command-menu |
open |
Wizard (wizard) |
pattern | @llui/components/patterns/wizard |
— | partial | composed from steps, button |
open |
Utilities
| Component | Kind | Headless import | llui add |
Baseline theme | Registry skins | Gallery |
|---|---|---|---|---|---|---|
Icons (icons) |
presentational | — | icons |
— | partial | open |
In View (in-view) |
machine | @llui/components/in-view |
— | styleless | styleless | open |
Presence (presence) |
machine | @llui/components/presence |
— | styleless | styleless | open |
Aliases
An alias is an llui add name that differs from the canonical component's own name —
usually the name shadcn/ui gives the same thing, so a name you already know installs the right
source. Each alias resolves to exactly one canonical component; the Installs column says
what it copies, and the gallery link opens that exact copied artifact.
llui add alias |
Installs | Canonical component | Headless import | Gallery |
|---|---|---|---|---|
breadcrumb |
skin | Breadcrumbs (breadcrumbs) |
@llui/components/breadcrumbs |
open |
command |
pattern adapter | Command Menu (command-menu) |
@llui/components/patterns/command-menu |
open |
dropdown-menu |
skin | Menu (menu) |
@llui/components/menu |
open |
input-otp |
skin | Pin Input (pin-input) |
@llui/components/pin-input |
open |
resizable |
skin | Splitter (splitter) |
@llui/components/splitter |
open |
sonner |
skin | Toast (toast) |
@llui/components/toast |
open |
llui add breadcrumb # copies the Breadcrumbs skin; its machine is @llui/components/breadcrumbs
llui add command # copies the Command Menu pattern adapter; its machine is @llui/components/patterns/command-menu
llui add dropdown-menu # copies the Menu skin; its machine is @llui/components/menu
llui add input-otp # copies the Pin Input skin; its machine is @llui/components/pin-input
llui add resizable # copies the Splitter skin; its machine is @llui/components/splitter
llui add sonner # copies the Toast skin; its machine is @llui/components/toastWhere the import and add names differ
Every machine or pattern whose llui add name is not simply its own name — extra copied
variants, pattern adapters, aliases, and machines with nothing to copy.
| Component | Headless import | llui add |
Why it differs |
|---|---|---|---|
Breadcrumbs (breadcrumbs) |
@llui/components/breadcrumbs |
breadcrumb (alias) |
breadcrumb is an alias of breadcrumbs |
Command Menu (command-menu) |
@llui/components/patterns/command-menu |
command (alias) |
command is an alias of command-menu |
Confirm Dialog (confirm-dialog) |
@llui/components/patterns/confirm-dialog |
— | nothing to copy: on Registry skins it is composed from alert-dialog, button |
Date Picker (date-picker) |
@llui/components/date-picker |
calendar, date-picker |
calendar is a separate copied skin |
Drawer (drawer) |
@llui/components/drawer |
drawer, sheet |
sheet is a separate copied skin |
Fieldset (fieldset) |
@llui/components/fieldset |
— | nothing to copy: the Baseline theme styles it; with Registry skins, style its parts yourself |
Form (form) |
@llui/components/form |
— | nothing to copy: on Registry skins it is composed from form-field |
Form Field (form-field) |
@llui/components/patterns/form-field |
form |
llui add form copies this pattern adapter; @llui/components/form is the separate Form machine |
In View (in-view) |
@llui/components/in-view |
— | nothing to copy: a behaviour-only machine with no surface to style |
Listbox (listbox) |
@llui/components/listbox |
— | nothing to copy: the Baseline theme styles it; with Registry skins, style its parts yourself |
Menu (menu) |
@llui/components/menu |
dropdown-menu (alias) |
dropdown-menu is an alias of menu |
Pin Input (pin-input) |
@llui/components/pin-input |
input-otp (alias) |
input-otp is an alias of pin-input |
Presence (presence) |
@llui/components/presence |
— | nothing to copy: a behaviour-only machine with no surface to style |
Searchable Select (searchable-select) |
@llui/components/patterns/searchable-select |
— | nothing to copy: on Registry skins it is composed from select, command-menu |
Splitter (splitter) |
@llui/components/splitter |
resizable (alias) |
resizable is an alias of splitter |
Toast (toast) |
@llui/components/toast |
sonner (alias) |
sonner is an alias of toast |
Wizard (wizard) |
@llui/components/patterns/wizard |
— | nothing to copy: on Registry skins it is composed from steps, button |
Machine-free components
These are registry-only. There is no @llui/components/<name> to import, by design.
| Component | llui add |
Why no machine | Baseline theme | Gallery |
|---|---|---|---|---|
Alert (alert) |
alert |
presentational: a styled element with no state | — | open |
Aspect Ratio (aspect-ratio) |
aspect-ratio |
presentational: a styled element with no state | — | open |
Badge (badge) |
badge |
presentational: a styled element with no state | — | open |
Button (button) |
button |
presentational: a styled element with no state | — | open |
Button Group (button-group) |
button-group |
presentational: a styled element with no state | — | open |
Card (card) |
card |
presentational: a styled element with no state | — | open |
Chip (chip) |
chip |
presentational: a styled element with no state | styled | open |
Empty (empty) |
empty |
presentational: a styled element with no state | — | open |
Icons (icons) |
icons |
presentational: a styled element with no state | — | open |
Input (input) |
input |
presentational: a styled element with no state | — | open |
Input Group (input-group) |
input-group |
presentational: a styled element with no state | — | open |
Item (item) |
item |
presentational: a styled element with no state | — | open |
Kbd (kbd) |
kbd |
presentational: a styled element with no state | — | open |
Label (label) |
label |
presentational: a styled element with no state | — | open |
Separator (separator) |
separator |
presentational: a styled element with no state | — | open |
Sidebar (sidebar) |
sidebar |
interactive skin; your application owns its state | — | open |
Skeleton (skeleton) |
skeleton |
presentational: a styled element with no state | — | open |
Spinner (spinner) |
spinner |
presentational: a styled element with no state | — | open |
Textarea (textarea) |
textarea |
presentational: a styled element with no state | — | open |
Typography (typography) |
typography |
presentational: a styled element with no state | — | open |
Other @llui/components entry points
Public entry points that are not a component: the barrels, shared helpers, and styling helpers. The stylesheets are listed in Styling.
| Entry point | What it is |
|---|---|
@llui/components |
Root barrel: every component object, plus the locale surface (en, LocaleContext) and the format helpers. Prefer a subpath in new code. |
@llui/components/utils |
Shared helpers the machines are built from (typeahead, tree collection, focus trap, dismissable layers, floating, …). |
@llui/components/utils/* |
One shared helper per subpath, e.g. @llui/components/utils/typeahead. |
@llui/components/format/* |
Locale-aware formatting helpers (formatDate, formatNumber, formatRelativeTime, …), one per subpath. |
@llui/components/patterns |
Barrel of the composed patterns. |
@llui/components/styles |
JavaScript styling helpers for your own recipes: createVariants, cx, chipHue. Not a stylesheet. |
@llui/components/icon |
Any Iconify glyph as a real <svg>, on either styling path. |