Whit is Lily?

The short version

Lily is a catalog o wab components, ilkane implementit in aicht headless flavours (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, an Web Components) forbye a set o batteries-includit example apps that shaw hoo tae style them.

The headless versions come wi zero CSS. They gie ye semantic HTML, ARIA roles an states, keyboard support, an i18n-freendly props. Ye bring the visual design.

Design principles

Accessible

Ilka component stairts frae semantic HTML. ARIA is laid on anely whaur the HTML alane cannae express the pattern. Components ettle for WCAG 2.2 AAA — colours, spacin, focus, an keyboard navigation are aw considert.

Composable

Lily likes wee, single-purpose components that snap thegither. Compound patterns turn up ower an ower:

• Nav → List → ListItem — for breadcrumbs, contents lists, accordion menus, tree menus, an pagination
• Form → Field → Input — for onie form layoot wi labels, hints, an errors
• Table → Head/Body/Foot → Row → Data — for tables, calendars, gantt chairts, an kanban boards
• Bar → BarButton — for tool bars, tab bars, task bars, action bars, an menu bars
• Picker → PickerButton — for colour pickers, rating pickers, theme pickers

Internationalizable

No a single string the uiser sees is hardcodit. Labels, placeholders, error messages, button text — aw parameters. Drap in yer ain translation system an Lily speaks whitever leid ye speak.

Headless

Headless components hae nae CSS, nae <style> blocks, nae design tokens ye didnae opt intae. They shaw a single kebab-case class name on ilka root element sae ye can target them hooever ye like — semantic CSS, Tailwind, CSS-in-JS, yer ain cry.

Batteries-includit examples

The example apps shaw hoo tae style the components for real uiss — whit design tokens tae set, whit variations tae add, hoo tae pit pages thegither. They are full SvelteKit, Next.js, Nuxt, Blazor, an Eleventy apps, no juist sandboxes.

Inspirations

Lily taks patterns an leid frae a deliberately braid set o design systems:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Govrenment)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

Licence

Lily is multi-licenced unner BSD, MIT, Apache-2.0, GPL-2.0, or GPL-3.0. Pick whitever licence fits yer project. If nane o them wirk, gie us a shout.

Contact

Project lead: Joel Parker Henderson — joel@joelparkerhenderson.com.

Fund a bug, gote an idea, wantin tae contribute a component? Open an issue or a pull request on GitHub.