Ce este Lily?

Pe scurt

Lily este un catalog de componente web, fiecare implementată în opt variante headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks și Web Components), plus un set de aplicații-exemplu complete care arată cum se stilizează.

Versiunile headless vin cu zero CSS. Îți oferă HTML semantic, roluri și stări ARIA, suport pentru tastatură și proprietăți prietenoase cu internaționalizarea. Designul vizual îl aduci tu.

Principii de design

Accesibil

Fiecare componentă pornește de la HTML semantic. ARIA se adaugă doar acolo unde HTML-ul singur nu poate exprima modelul. Componentele țintesc WCAG 2.2 AAA — culorile, spațierea, focalizarea și navigarea cu tastatura sunt toate luate în considerare.

Compozabil

Lily preferă componente mici, cu un singur scop, care se potrivesc între ele. Modelele compuse apar iar și iar:

• Nav → List → ListItem — pentru breadcrumbs, liste de conținut, meniuri acordeon, meniuri arborescente și paginare
• Form → Field → Input — pentru orice aranjament de formular cu etichete, indicii și erori
• Table → Head/Body/Foot → Row → Data — pentru tabele, calendare, diagrame Gantt și panouri kanban
• Bar → BarButton — pentru bare de instrumente, bare de file, bare de sarcini, bare de acțiuni și bare de meniu
• Picker → PickerButton — pentru selectoare de culoare, selectoare de evaluare, selectoare de temă

Internaționalizabil

Niciun șir vizibil utilizatorului nu este scris direct în cod. Etichetele, substituenții, mesajele de eroare, textul butoanelor — toate sunt parametri. Conectează-ți propriul sistem de traducere și Lily vorbește orice limbă vorbești tu.

Headless

Componentele headless au zero CSS, niciun bloc <style> , niciun token de design pe care să nu-l fi ales tu. Expun un singur nume de clasă în kebab-case pe fiecare element rădăcină, ca să le poți ținti cum dorești — CSS semantic, Tailwind, CSS-in-JS, alegerea ta.

Exemple complete

Aplicațiile-exemplu arată cum se stilizează componentele pentru utilizare reală — ce tokenuri de design să setezi, ce variante să adaugi, cum să compui pagini. Sunt aplicații complete SvelteKit, Next.js, Nuxt, Blazor și Eleventy, nu doar medii de testare.

Surse de inspirație

Lily preia modele și limbaj dintr-un set intenționat larg de sisteme de design:

• 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

Licență

Lily are mai multe licențe: BSD, MIT, Apache-2.0, GPL-2.0 sau GPL-3.0. Alege-o pe cea care se potrivește proiectului tău. Dacă niciuna nu merge, contactează-ne.

Contact

Liderul proiectului: Joel Parker Henderson — joel@joelparkerhenderson.com.

Ai găsit o eroare, ai o idee, vrei să contribui cu o componentă? Deschide un issue sau un pull request pe GitHub.