LiltUI
A component registry, the Lilt way

Precision with a playful rhythm

LiltUI is a shadcn-compatible registry of 63 copy-paste React components, built on Base UI and Tailwind v4 and dressed in warm paper surfaces, hand-drawn icons, and a swappable pine-and-mint accent. Yours to own, edit, and rebrand.

Read the docsBrowse components
npx shadcn add @lilt/button
  • 63components
  • 6component packs
  • Base UIfoundation
  • Light + darkout of the box
  • MITlicensed
Live, not screenshots

Sixty-three components, one gentle rhythm

Every tile below is the real component, rendered right here — not a screenshot. Click, drag, toggle, and press ⌘K. What you see is what gets copied into your project.

Browse all 63
ChartDocs →
ButtonDocs →
July 2026

Penciled in for July 20. The ferns approve.

CalendarDocs →
FreshNeeds reviewFeaturedFailingDraft
BadgeDocs →
CommandDocs →
Volume
65
Cozy range
20 – 60
SliderDocs →

You gave it 3 of 5. The marigolds are flattered.

Garden club average
RatingDocs →
Storage used
x
Weekly focus
x
MeterDocs →
SHLTUI
AvatarDocs →
SwitchDocs →

  1. Shipped the combobox

    Planted, watered, and released into the wild.

  2. Wrote the docs

    Every prop pressed neatly, like flowers in a notebook.

  3. Broke the build, briefly

    A rogue semicolon. We do not speak of it.

TimelineDocs →
Why LiltUI

Opinionated where it counts, yours everywhere else

Precise structure, restrained motion, and copy-paste ownership — the Lilt design language, distilled into components you can trust and reshape.

Accessible on Base UI

Every interactive component is a Base UI primitive underneath — focus management, keyboard navigation, and ARIA handled for you, with hand-written accessibility notes on each component page.

You own every line

Components aren't installed from npm. The shadcn CLI copies the source into your project, so you can read every line, edit freely, and never fight a version bump.

Rebrand with four tokens

The pale-mint accent is a guest, not a landlord. Swap four semantic tokens — primary, soft, text, and focus — and the whole registry rebrands with you.

Light and dark, both tuned

Full semantic token sets ship for both modes. Long-form text stays AAA-minded near-black on near-white; pastels carry status and personality only.

Borders, not shadows

Hierarchy comes from 1px borders and warm surface shifts. Nothing floats, nothing looms — and hover motion is capped at one 2px lift, removed entirely under reduced-motion.

Built to be AI-discoverable

Ships /llms.txt and a /context7.json manifest generated straight from the registry, so coding assistants can index LiltUI and install components accurately.

The full kit

Every component, grouped by the job it does

64 components, sorted into six packs so you can find the right one fast. Add any of them with a single shadcn command.

Core

4 components

The everyday handful you reach for first.

Form

20 components

Inputs, controls, and validation, accessible by default.

Overlay

10 components

Menus, dialogs, toasts, and the ⌘K palette.

Display

13 components

Badges, avatars, meters — status and personality.

Structure

13 components

Layout, navigation, and page scaffolding.

Data

4 components

Tables, charts, and calendars that carry real data.

IconsButtonLabelInputTextareaCardBadgeSkeletonAlertBreadcrumbTableCheckboxRadio GroupSwitchFieldSelectAvatarSeparatorDialogTooltipPopoverDropdown MenuToastTabsAccordionToggleToggle GroupSliderNumber FieldInput OTPProgressSpinnerEmpty StateKbdAlert DialogHover CardContext MenuMenubarDrawerComboboxCollapsibleScroll AreaPaginationCalendarDate PickerData TableChartCarouselAutocompleteFormFieldsetCheckbox GroupTags InputRatingFile UploadCommandNavigation MenuToolbarSidebarStepperTimelineMeterResizableTreeIconsButtonLabelInputTextareaCardBadgeSkeletonAlertBreadcrumbTableCheckboxRadio GroupSwitchFieldSelectAvatarSeparatorDialogTooltipPopoverDropdown MenuToastTabsAccordionToggleToggle GroupSliderNumber FieldInput OTPProgressSpinnerEmpty StateKbdAlert DialogHover CardContext MenuMenubarDrawerComboboxCollapsibleScroll AreaPaginationCalendarDate PickerData TableChartCarouselAutocompleteFormFieldsetCheckbox GroupTags InputRatingFile UploadCommandNavigation MenuToolbarSidebarStepperTimelineMeterResizableTree
Theming

Mint is a guest, not a landlord

Components read semantic --lilt-* variables, never raw hex. Warm paper surfaces, AAA-minded text, a deep-pine accent, and a pale-mint wash that stays a guest. Swap five tokens and the whole registry follows you into a new brand.

Canvas--lilt-canvas
Surface--lilt-surface
Text--lilt-text
Pine--lilt-primary
Mint--lilt-primary-tint
Mint soft--lilt-primary-soft
Warning--lilt-warning
Highlight--lilt-highlight
Danger--lilt-danger
Chart 1--lilt-chart-1
Chart 2--lilt-chart-2
Chart 3--lilt-chart-3
Chart 4--lilt-chart-4
Chart 5--lilt-chart-5

Rebrand in five tokens

Every accent in LiltUI traces back to the same five variables, in both light and dark. Override them once and buttons, badges, focus rings, links, and charts all shift together. No component edits, no theme fork to maintain.

Radii, motion durations, and the shared ease-out live in tokens too, so the rhythm stays consistent wherever you take it.

/* Rebrand: replace these five tokens, keep everything else. */
:root {
  --lilt-primary: #167f55;       /* strong fills: switch, slider, toggle */
  --lilt-primary-tint: #aeeacf;  /* pale wash: selection, soft hovers    */
  --lilt-primary-soft: #e3f7ed;  /* soft fills & badges                  */
  --lilt-primary-text: #164c35;  /* text on soft fills                   */
  --lilt-focus: #167f55;         /* focus rings                          */
}
Getting started

Install what you want, own what you keep

From zero to your first component in four small steps.

  1. Register the @lilt namespace

    Point the shadcn CLI at the LiltUI registry once, in your components.json. Works in any React project with Tailwind v4 — Next.js, Vite, and anything the CLI supports.

    {
  "registries": {
    "@lilt": "https://lilt-ui.vercel.app/r/{name}.json"
  }
}

  2. Add the theme

    Pull in the Lilt design tokens for light and dark, then load Space Grotesk + DM Sans and wrap your app in the theme-provider.

    npx shadcn add @lilt/theme

  3. Add the components you need

    Add components by name. Dependencies and any missing theme variables merge in automatically, and Base UI is installed as needed.

    npx shadcn add @lilt/button @lilt/field @lilt/dialog

  4. Own the code

    The source now lives in your repo. Read it, restyle it, delete what you don't use — it's yours, with no version to fight.

    import { Button } from "@/components/ui/button";

export const Ship = () => <Button icon="arrow">Ship it</Button>;
FAQ

Questions, answered plainly

The fine print, without the fine print.

Start building with LiltUI

Precision with a playful rhythm. Copy in the theme, add your first component, and make it yours in minutes.

Read the docsBrowse components
npx shadcn add @lilt/theme