Open source, CSS-first, white-label design system for SaaS products.

Lyra keeps every visual decision in CSS custom properties and .lyra-* classes — framework adapters are thin wrappers on top of the same core. Rebrand an entire app by setting four tokens.

• 209 semantic tokens — light/dark built in, no manual dark styles
• White-label — brands define --brand, --brand-contrast, --brand-radius, --brand-font; everything else is derived via color-mix
• @lyra-ds/react — 40 components as thin wrappers; Vue, Svelte & Web Components adapters on the roadmap (Zag.js)
• shadcn interop — opt-in compat layer maps --background, --primary, --ring… to Lyra tokens
• LLM-first — llms.txt generated from the real .d.ts sources, so agents write correct Lyra code

Site: lyra-ds.dev · Docs: docs.lyra-ds.dev · For agents: llms.txt