Open source · MITComponents that scale
Components that scale
from prototype to production
A CSS-first design system that works anywhere, with React wrappers available today.
Components
Accessible by default
Visible focus, AA contrast, and complete states — without extra work on your side.
Activedesign-tokens
One system, four stacks
CSS-first, thin adapters
The appearance lives in .lyra-* classes, so the CSS works in every stack. A framework card promises a wrapper package; React is the only one available today.
ReactReady
@lyra-ds/reactVue 3Coming soon
Laravel BladeComing soon
Phoenix LiveViewComing soon
Theming
White-label without starting over
111 semantic tokens control color, type, and spacing. Re-brand with only the 4 source tokens.
- Light and dark from one attribute.
- A complete accent ramp from 4 inputs.
- compat-shadcn is an opt-in layer, never on by default.
html[data-brand='harbor'] {
--brand: #0d9488;
--brand-contrast: #ffffff;
--brand-radius: 12px;
--brand-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
Built in the open
No paid plan, no paywall. Lyra moves through contribution, and the whole core is MIT.
Sponsors
Sustaining Lyra, together
Help keep Lyra open, focused, and growing for everyone.
Your support helps turn a volunteer project into a durable tool for the whole community.
Become a sponsorFAQ
Questions before you adopt it
Nothing here is behind a login. If your question is missing, open a discussion.
Yes. Every part of Lyra — components, tokens and themes — is MIT licensed. There is no paid tier, no component behind a paywall, and nothing that expires. Commercial use, modification and redistribution are all covered by the licence.
The appearance lives entirely in .lyra-* classes, shipped as plain CSS with no build step. A framework package is a thin wrapper that maps props onto those classes. So the stylesheet already works in Vue, Blade, LiveView or hand-written HTML today — React is simply the wrapper package that exists so far.
Yes, and it needs no build step. Light and dark come from a single data-theme attribute. Re-branding means overriding four tokens — --brand, --brand-contrast, --brand-radius and --brand-font — and the whole accent ramp is derived from them. The white-label guide walks through it.
Accessibility is part of each component's acceptance criteria, not a pass at the end. Every component is rendered in light and dark and scanned with axe on each change, and the contrast of the token palette was checked in Chromium, Firefox and WebKit — 16 base colours across both themes, none below AA.
It is a 0.x release, and the version says exactly what that means: usable, not yet frozen. The API can still change before 1.0, so pin the version you install — every change ships through a changeset with its own changelog entry. The components come from a single design handoff and are tested in a real browser rather than a simulated DOM.