Di case for Lily

Lily give you di hard parts — semantics, accessibility, keyboard behaviour, internationalization — and leave di look completely, happily, for you.

Start from your design

Your team don already know how your product suppose look. Lily start exactly from there: e dey supply di parts wey really hard to do well and costly to do again — di correct semantic element, di ARIA states, di keyboard contract, focus management — and leave every visual decision completely, joyfully, for you. Your CSS na di look of di design system, from day one.

Because every component carry stable class hook and pure structure, your styling go stay cleanly yours through every upgrade — and di accessibility wey dey under am go keep working, version after version.

Wetin Lily promise

  • Accessible by default. WCAG 2.2 AAA na di target for every component. Patterns dey follow di WAI-ARIA Authoring Practices; every interactive component fit work with keyboard with documented contract; di example apps dey keep clean axe-core baseline.
  • Internationalizable by construction. Every string wey user go see — each label, error, and announcement — na prop wey get stable names for all frameworks, so translation go flow naturally. RTL and bidirectional text dey inherit from your dir. Locale-aware components dey take di locale as prop, always explicitly.
  • One catalog, eight frameworks. Di same 571 components (536 as native Web Components) with di same class hooks and prop conventions for HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, and Web Components. Your CSS and your team knowledge go move across stacks.
  • CSS-strategy agnostic. One stable kebab-case class for every component root. Semantic CSS, Tailwind utilities, CSS-in-JS, or one of di 57 ready-made themes — Lily welcome all of dem and e go gracefully comot for your way.
  • Free, forever, for your own terms. Open source under your choice of BSD, MIT, Apache-2.0, GPL-2.0, or GPL-3.0. No pro tier, no seat licenses, no telemetry.

Depth where e matter

Beyond di usual buttons and dialogs, di catalog reach pass most:

  • Public-sector patterns wey dem research from di NHS UK, GOV.UK, USWDS, and ONS design systems — error summaries, warning callouts, summary lists, phase banners, skip links.
  • 140 national personal identifier components wey cover healthcare, national-ID, tax, and passport identifiers across 50+ countries, each one dey document im format and validation algorithm.
  • Editorial and scrollytelling primitives wey dem adapt from Reuters Graphics — article layouts, scrollers, timelines, tile maps.
  • Picker helpers — small packages wey each one own one interaction from start to finish: theme switching (with runtime stylesheet loading), language, text size, reduced motion, search, page links, sharing, and date-time entry. Each one na headless icon button wey open popup — no be native <select> — with persistence and SSR safety wey dey inside.

Themes for di public sector, ready from di box

Lily come with 57 standalone reference themes wey target im class hooks directly: NHS England, NHS Scotland, and NHS Wales (each for patient-facing and practitioner-facing variants), GOV.UK, USWDS, palettes wey Adobe Spectrum and Mozilla Protocol inspire, and set of general-purpose light and dark themes. Link one stylesheet and government-grade look don ready; di theme-picker helper dey swap dem for runtime.

How Lily compare

We dey keep honest, component-by-component comparison against other design systems — styled and headless, commercial and public-sector. Where another library fit you pass, di comparison go show am; Lily dey learn from all of dem and dey openly cite im inspirations.

Who dey behind am

Lily na young, independent open-source project wey welcome collaboration, guidance, and feedback — see About for di story and di inspirations. Everything — di specification, di tests, di roadmap, even di audit tooling — dey open for github.com/LilyDesignSystem.

Help Lily grow

If Lily dey useful to you, na dis be di most valuable tins wey you fit do:

  • Star am and share am. Star di main repo and show colleague di catalog — awareness na di scarcest resource wey young project get.
  • Build something and tell us. Real-world usage reports — wetin work, wetin fit smooth pass — dey shape di roadmap pass anything else.
  • Audit accessibility. Screen-reader passes (VoiceOver, NVDA, JAWS) for di example apps na gold; file wetin you find.
  • Contribute theme or translation. Both na self-contained, well-scoped first contributions.
  • Share wetin you find, with minimal reproduction, for di GitHub repository, or email joel@joelparkerhenderson.com.