Lily Design System™

Build web designs better.

Lily™ is a free open-source design system with hundreds of components. You can use headless where you bring your own CSS, or styled customizable themes.

Start the tutorial Browse headless components Browse styled examples

Your design, from day one

Your team has ideas about how your product should look. Lily provides semantic elements, ARIA states, keyboard contracts, focus management, and more - and you can style all the components as you wish.

<!-- What Lily renders: semantic HTML, correct ARIA, one class hook -->
<button class="button" type="button">Save</button>
/* What you write: any CSS you like — it applies directly, first try */
.button {
  background: rebeccapurple;
  color: #fff;
  border-radius: 9999px;
}

One stable class hook per component. Zero CSS shipped. Your styles apply cleanly and stay cleanly yours.

Try Lily in 30 seconds

1. Copy a component. Lily's HTML flavour is plain markup — paste it straight into any page, zero install, zero build step:

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

2. Style the class hooks. Each component carries one kebab-case class — that's the whole contract:

.button     { background: #2563eb; color: #fff; padding: 0.75rem 1.5rem; }
.text-input { border: 2px solid #6b7280; padding: 0.5rem 0.75rem; }
.label      { font-weight: 600; }

3. In a hurry? Link a ready-made theme instead. One stylesheet and the same markup lights up — NHS, GOV.UK, USWDS, dark, nord, and 40 more:

<link rel="stylesheet" href="/themes/dark.css" />

Prefer Svelte, React, Vue, Angular, Blazor, or Nunjucks? The same components exist in each, with the same class hooks and prop names.

Follow the 10-minute tutorial for your framework →

Seven styled example apps, yours to explore and adjust

Curious what Lily looks like fully dressed? Seven complete example apps show every one of the 491 components live and styled — one app per framework: plain HTML+CSS+JS, SvelteKit, Next.js, Nuxt, Angular + Analog, Blazor Web, and Nunjucks + Eleventy.

Each app is a warm, working reference: a searchable catalog at /components, a live demo page for every component, and composed pages — dashboards, contact forms, settings, task boards — showing the pieces working together. Best of all, the stylesheets target the same class hooks you'll use, so you can copy any of the CSS straight into your own project and adjust it as you wish. It's all free, open source, and made to be remixed.

git clone https://github.com/LilyDesignSystem/lily-design-system-svelte-sveltekit-examples
cd lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

Explore all seven example apps →

Find your path

Tutorials

Learn Lily step by step: render your first component, style it, theme it, and add language and text-size preferences — in whichever of the seven frameworks you use.

Start here — about 10 minutes

Component catalog

Save time with 491 reusable, accessible components — each documented with props, ARIA contract, keyboard interactions, and a live demo.

491 components, searchable

Example apps

See the whole system working end to end: seven complete, styled reference applications — SvelteKit, Next.js, Nuxt, Angular + Analog, Blazor Web, Eleventy, and plain HTML+CSS+JS — with CSS you're welcome to copy and adjust.

Clone one and explore

Claude Skills

Give Claude Code a curated entry point into Lily: 26 skills — general, per-framework, and per-subproject — so an agent loads exactly the context it needs.

26 skills, 8 frameworks

Help

Find answers fast: setup guides, styling and theming reference, troubleshooting, FAQ, and how to reach a friendly human who reads every message.

Answers and support

Your design. Our groundwork.

Own every pixel

Every font, color, spacing, and breakpoint decision belongs to you — your CSS is the design system's look from day one. Hand-written styles, Tailwind utilities, or one of Lily's 45 reference themes all work beautifully.

Accessibility, ready-made

WCAG 2.2 AAA is the target. Semantic elements, ARIA states, keyboard contracts, and focus behaviour ship inside every component and are verified by per-framework test suites and axe-core baselines.

Freedom to move

The same catalog in seven frameworks with the same class names and prop conventions. Switch stacks, mix stacks, or migrate gradually — your CSS and your knowledge carry over.

Read the full case for Lily →

Lily shines when…

  • You have a design of your own — or want one — and want a library that honours it everywhere.
  • Accessibility is a day-one requirement for your product.
  • Your product ships in more than one language.
  • Your organisation uses more than one framework — or might someday.
  • You want NHS / GOV.UK / USWDS patterns and themes out of the box.

See the component-by-component comparison against 17 design systems — styled and headless, commercial and public-sector — so you can choose with confidence.

Good questions, quick answers

Headless… so my components arrive unstyled?

Yes — and that's the gift: everything you write applies directly, and every visual decision is yours. Style the class hooks yourself, or link one of the 45 ready-made themes and be fully styled in one line. (This accordion is a native <details>, styled exactly that way.)

Is Lily really free?

Yes! Free and open source under your choice of BSD, MIT, Apache-2.0, GPL-2.0, or GPL-3.0. Every component, every theme, and every helper is included — yours, forever.

Which frameworks can I use Lily with?

Plain HTML, Svelte, React, Vue, Angular, Blazor, and Nunjucks — the same 491 components in each. And because the contract is simply class hooks on semantic HTML, your CSS carries over to every one of them.

How mature is Lily?

Lily is young and growing fast — expect a steady stream of additions, and pin versions for a calm upgrade cadence. Everything is developed in the open: the specification, tests, roadmap, and audits all live in the repos. Your feedback shapes the roadmap more than anything else.

More questions answered on the help page →

What's new

Latest — July 2026. Tooling hardening and release hygiene: catalog cross-checks in bin/test, regenerated example-app registries, link checking, and CI. Every preference helper renamed from *-select / *-button to *-picker (theme-picker, locale-picker, text-size-picker, share-picker), and a fifth helper — date-time-picker — joins all seven framework catalogs. Read the changelog →