Lyra Design System

Português (pt-BR)

Open source, CSS-first design system. Semantic tokens, white-label theming, thin React wrappers — Vue, Svelte and Web Components on the same CSS core.

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.

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

Install the styles and React packages, then import the stylesheet once at your app root:

npm i @lyra-ds/styles @lyra-ds/react

// Import the Lyra stylesheet once, at your application root.
import '@lyra-ds/styles';

import { Button } from '@lyra-ds/react';

export function Example() {
  return <Button variant="primary">Get started</Button>;
}

• Versioning policy — how the 0.x line and breaking changes work.
• Contributing — local setup, changesets, and locked decisions.
• Code of Conduct
• Security policy

MIT © Francisross Soares de Oliveira and Lyra DS contributors.