Wetin be Lily?

Di short version

Lily na catalog of web components, each one dey for eight headless flavors (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, and Web Components) plus some complete example apps wey show how to style dem.

Di headless versions come with zero CSS. Dem go give you semantic HTML, ARIA roles and states, keyboard support, and props wey good for i18n. You go bring di visual design.

Design principles

Accessible

Every component start from semantic HTML. Dem go only add ARIA where HTML alone no fit show di pattern. Di components dey aim for WCAG 2.2 AAA — dem consider colors, spacing, focus, and keyboard navigation.

Composable

Lily like small components wey get one work and wey fit join together. Compound patterns dey show again and again:

• Nav → List → ListItem — na for breadcrumbs, contents lists, accordion menus, tree menus, and how to divide pages
• Form → Field → Input — for any form layout wey get labels, hints, and errors
• Table → Head/Body/Foot → Row → Data — na for tables, calendars, gantt charts, and kanban boards wey dem dey use
• Bar → BarButton — na for tool bars, tab bars, task bars, action bars, and menu bars wey dey top di page
• Picker → PickerButton — na for color pickers, rating pickers, and theme pickers wey people dey use

Internationalizable

Even one string wey user go see no dey hardcoded. Labels, placeholders, error messages, button text — all of dem na parameters. Put your own translation system and Lily go talk any language wey you dey talk.

Headless

Headless components no get CSS, no <style> blocks, no design tokens wey you no choose. Dem show one kebab-case class name for every root element so you fit target dem how you want — semantic CSS, Tailwind, CSS-in-JS, na your choice.

Batteries-included examples

Di example apps show how to style di components for real use — which design tokens to set, which variations to add, how to put pages together. Dem be full SvelteKit, Next.js, Nuxt, Blazor, and Eleventy apps, no be just sandboxes.

Inspirations

Lily dey take patterns and language from plenty different design systems wey e choose on purpose:

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

License

Lily get many licenses, under BSD, MIT, Apache-2.0, GPL-2.0, abi GPL-3.0. Pick di license wey fit your project. If none of dem work, abeg contact us.

Contact

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

You see bug, you get idea, you wan contribute component? Open issue or pull request for GitHub.