# LiltUI > A shadcn-compatible React component registry built on the Lilt design system: > precise structure, warm paper surfaces, a swappable pale-mint accent, hand-drawn > icons, and restrained motion. Components are not installed from npm — their source is copied into your project with the shadcn CLI (`npx shadcn add @lilt/`), built on Base UI primitives and styled with Tailwind v4 semantic `--lilt-*` tokens. Start with `npx shadcn add @lilt/theme` to pull in the design tokens. ## Docs - [Introduction](https://lilt-ui.vercel.app/docs): What LiltUI is, how the registry works, and the design rules. - [Installation](https://lilt-ui.vercel.app/docs/installation): Point the shadcn CLI at the @lilt registry, fonts, and ThemeProvider setup. - [Theming](https://lilt-ui.vercel.app/docs/theming): Semantic --lilt-* design tokens for color, radius, motion, type, and elevation. ## Components ### Core - [Button](https://lilt-ui.vercel.app/docs/components/button): Pill-shaped for md/lg, 12px radius compact. Variants: primary, secondary, soft, danger. 2px hover lift. - [Card](https://lilt-ui.vercel.app/docs/components/card): Bordered surface card with optional interactive hover lift. Includes Header/Title/Description/Content/Footer. - [Field](https://lilt-ui.vercel.app/docs/components/field): Form field wiring labels, descriptions, and errors automatically (Base UI Field). Includes the 'Optional, no pressure' note. - [Dialog](https://lilt-ui.vercel.app/docs/components/dialog): Base UI dialog in Lilt style: dialog radius, blurred green-black backdrop, eyebrow header, icon-only close. Borders, no shadows. ### Form - [Label](https://lilt-ui.vercel.app/docs/components/label): Form label in Lilt's small-semibold style. - [Input](https://lilt-ui.vercel.app/docs/components/input): Text input: 48px height, 16px radius, warm field surface, focus ring in Lilt green. - [Textarea](https://lilt-ui.vercel.app/docs/components/textarea): Multi-line input matching the Input recipe. - [Checkbox](https://lilt-ui.vercel.app/docs/components/checkbox): Base UI checkbox with Lilt skin: 24px rounded box, hand-drawn check, indeterminate minus. - [Radio Group](https://lilt-ui.vercel.app/docs/components/radio-group): Base UI radio group: round items with inner dot indicator. - [Switch](https://lilt-ui.vercel.app/docs/components/switch): Base UI switch: 48x28 pill track, pine when checked. - [Select](https://lilt-ui.vercel.app/docs/components/select): Base UI select styled like Lilt inputs. Borderful popup, no shadows, dropdown positioning. - [Toggle](https://lilt-ui.vercel.app/docs/components/toggle): A pressed/unpressed button. Pine when on, honest aria-pressed underneath. - [Toggle Group](https://lilt-ui.vercel.app/docs/components/toggle-group): A pill rail of toggles with roving focus. Single or multiple selection. - [Slider](https://lilt-ui.vercel.app/docs/components/slider): Single or range slider on native range inputs. Pine fill, 24px thumbs. - [Number Field](https://lilt-ui.vercel.app/docs/components/number-field): Numeric input with steppers and a scrubbable label. Hold to repeat. - [Input OTP](https://lilt-ui.vercel.app/docs/components/input-otp): One-time code entry that pastes, autofills, and announces like a single field. - [Combobox](https://lilt-ui.vercel.app/docs/components/combobox): A searchable select on a real text input. Filtering built in, empty state included. - [Autocomplete](https://lilt-ui.vercel.app/docs/components/autocomplete): Free-text search with suggestions. You keep what you type; the list only helps. Need a required value? That's Combobox. - [Form](https://lilt-ui.vercel.app/docs/components/form): A native form with consolidated error handling — client rules and server errors land in the same Field slots. - [Fieldset](https://lilt-ui.vercel.app/docs/components/fieldset): A native fieldset with a stylable legend for grouping related fields under one name. - [Checkbox Group](https://lilt-ui.vercel.app/docs/components/checkbox-group): Shared state for a series of checkboxes, including the parent select-all with an honest mixed state. - [Tags Input](https://lilt-ui.vercel.app/docs/components/tags-input): Free-typed tags in a real text field. Enter or comma commits; Backspace takes the last one back. - [Rating](https://lilt-ui.vercel.app/docs/components/rating): Hand-drawn stars on radio bones. Hover previews, arrows adjust, nothing is a div pretending. - [File Upload](https://lilt-ui.vercel.app/docs/components/file-upload): A dashed drop zone wrapped around a native file input. Drag in or browse — same list either way. ### Overlay - [Tooltip](https://lilt-ui.vercel.app/docs/components/tooltip): Inverted-surface tooltip (near-black on light, near-white on dark). Share timing with one TooltipProvider per app. - [Popover](https://lilt-ui.vercel.app/docs/components/popover): Bordered surface popover with title and description parts. - [Dropdown Menu](https://lilt-ui.vercel.app/docs/components/dropdown-menu): Base UI menu with Lilt popup skin: groups, checkbox items, submenus, danger items in muted brick red. - [Toast](https://lilt-ui.vercel.app/docs/components/toast): Stacked, swipeable notifications. Exports a global toast manager plus a to mount once. - [Alert Dialog](https://lilt-ui.vercel.app/docs/components/alert-dialog): Confirmation that requires an explicit choice. No backdrop dismiss, no X — pick an answer. - [Hover Card](https://lilt-ui.vercel.app/docs/components/hover-card): Link previews on hover and focus. The link must stand on its own for touch. - [Context Menu](https://lilt-ui.vercel.app/docs/components/context-menu): Right-click (or long-press) menu wearing the dropdown-menu skin, anchored to the pointer. - [Menubar](https://lilt-ui.vercel.app/docs/components/menubar): A pill rail of menus with hover-switching and full keyboard navigation. - [Drawer](https://lilt-ui.vercel.app/docs/components/drawer): A swipeable sheet from the bottom, right, or left. Dialog semantics, drawer physics. - [Command](https://lilt-ui.vercel.app/docs/components/command): A ⌘K palette: Base UI Autocomplete inline inside a dialog. Search, arrow, Enter, done. ### Display - [Icons](https://lilt-ui.vercel.app/docs/components/icons): Lilt's hand-drawn interface icon set. - [Badge](https://lilt-ui.vercel.app/docs/components/badge): Pill badge. Pastel backgrounds always pair with AAA-minded text tokens. - [Skeleton](https://lilt-ui.vercel.app/docs/components/skeleton): Loading placeholder using the secondary surface. Opacity-only pulse, reduced-motion friendly. - [Alert](https://lilt-ui.vercel.app/docs/components/alert): Status block with hand-drawn icon. Variants: info, success, warning, danger. - [Avatar](https://lilt-ui.vercel.app/docs/components/avatar): Round avatar with mint-soft initials fallback. - [Separator](https://lilt-ui.vercel.app/docs/components/separator): Accessible 1px rule in both orientations. - [Progress](https://lilt-ui.vercel.app/docs/components/progress): A labeled progress bar. Pass value null for indeterminate, honest busy state. - [Spinner](https://lilt-ui.vercel.app/docs/components/spinner): A hand-drawn loading arc. Freezes politely under reduced motion. - [Empty State](https://lilt-ui.vercel.app/docs/components/empty-state): A dashed-border resting place for nothing-yet moments, with room for one gentle joke. - [Kbd](https://lilt-ui.vercel.app/docs/components/kbd): Keycap hints with a 2px bottom border for depth. Borders, still not shadows. - [Carousel](https://lilt-ui.vercel.app/docs/components/carousel): An Embla carousel with round paper arrows and keyboard scrolling. Horizontal or vertical; autoplay optional. - [Timeline](https://lilt-ui.vercel.app/docs/components/timeline): An ordered list dressed as a timeline: dots, connectors, and honest time elements. - [Meter](https://lilt-ui.vercel.app/docs/components/meter): A labeled readout of a value within a range — storage, quota, capacity. Pine fill, honest number. ### Structure - [Breadcrumb](https://lilt-ui.vercel.app/docs/components/breadcrumb): Breadcrumb navigation with Lilt's hand-drawn arrow separators. - [Table](https://lilt-ui.vercel.app/docs/components/table): Semantic table with eyebrow-style headers inside a bordered, scrollable card. - [Tabs](https://lilt-ui.vercel.app/docs/components/tabs): Base UI tabs in the Lilt pill skin, with an active pill that glides between tabs. Works for page-style section switching too. - [Accordion](https://lilt-ui.vercel.app/docs/components/accordion): Border-separated accordion with hand-drawn chevron and smooth height transition. - [Collapsible](https://lilt-ui.vercel.app/docs/components/collapsible): One trigger, one panel, a smooth height. Supports hidden-until-found. - [Scroll Area](https://lilt-ui.vercel.app/docs/components/scroll-area): Native scrolling with quiet lilt scrollbars that appear when needed. - [Pagination](https://lilt-ui.vercel.app/docs/components/pagination): A nav landmark of round page links. The current page carries aria-current. - [Navigation Menu](https://lilt-ui.vercel.app/docs/components/navigation-menu): Site navigation with a shared mega-menu panel that resizes and slides between items. Borders, no shadows. - [Toolbar](https://lilt-ui.vercel.app/docs/components/toolbar): A pill rail that groups buttons, toggles, and links behind a single tab stop. - [Sidebar](https://lilt-ui.vercel.app/docs/components/sidebar): A collapsible navigation rail: icons-only on a click, a drawer on phones, a cookie so it remembers. - [Stepper](https://lilt-ui.vercel.app/docs/components/stepper): Numbered steps with pine checkmarks for the road already walked. - [Resizable](https://lilt-ui.vercel.app/docs/components/resizable): Split panes you can drag or arrow-key, with a hand-drawn grip to hold onto. - [Tree](https://lilt-ui.vercel.app/docs/components/tree): Folders that open, rows that drag, checkboxes that tell the truth about what's underneath. ### Data - [Calendar](https://lilt-ui.vercel.app/docs/components/calendar): A month grid on react-day-picker: pine selections, soft mint ranges, bordered today. Single, multiple, or range. - [Date Picker](https://lilt-ui.vercel.app/docs/components/date-picker): Calendar in a popover behind a plain-spoken button. Single date or range, controlled or not. - [Data Table](https://lilt-ui.vercel.app/docs/components/data-table): TanStack Table on Lilt's table primitives: sorting, pagination, row selection, and column visibility in one generic component. - [Chart](https://lilt-ui.vercel.app/docs/components/chart): Recharts with Lilt manners: five palette tokens, bordered tooltip, quiet grid. Config-driven colors and legends.