Build web designs better.

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.

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 →

Curious what Lily looks like fully dressed? Seven complete example apps show the} 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 →