Lyra
Documentação
Open source · MIT

Componentes que escalam
do protótipo à produção

Um design system CSS-first que funciona em qualquer lugar, com wrappers React disponíveis hoje.

Documentaçãonpm i @lyra-ds/react
Licença MIT
Componentes

Acessíveis por padrão

Foco visível, contraste AA e estados completos — sem esforço extra do seu lado.

Ativodesign-tokens
Um sistema, quatro stacks

CSS-first, adaptadores finos

A aparência vive em classes .lyra-*, então o CSS funciona em qualquer stack. Um card de framework promete um pacote wrapper; só React está disponível hoje.

ReactPronto
@lyra-ds/react
Vue 3Em breve
Laravel BladeEm breve
Phoenix LiveViewEm breve
Temas

White-label sem recomeçar

111 tokens semânticos controlam cor, tipo e espaçamento. Refaça a marca com apenas os 4 tokens de origem.

  • Claro e escuro a partir de um atributo.
  • Uma escala completa de destaque a partir de 4 entradas.
  • compat-shadcn é uma camada opt-in, nunca ativada por padrão.
css
html[data-brand='harbor'] {
  --brand: #0d9488;
  --brand-contrast: #ffffff;
  --brand-radius: 12px;
  --brand-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

Feito no aberto

Sem plano pago, sem paywall. Lyra avança por contribuição, e todo o núcleo é MIT.

Contribuir

Encontre uma boa primeira issue e ajude a moldar Lyra.

Discutir

Leve ideias e dúvidas para a comunidade.

Melhorar a documentação

Deixe os guias e exemplos mais claros para a próxima pessoa desenvolvedora.

Sponsors

Mantendo o Lyra, juntos

Ajude a manter o Lyra aberto, focado e em crescimento para todo mundo.

Seu apoio ajuda a transformar um projeto voluntário em uma ferramenta duradoura para toda a comunidade.

Apoie o projeto
FAQ

Perguntas antes de adotar

Nada aqui está atrás de login. Se faltou a sua, abra uma discussão.

Sim. Cada parte do Lyra — componentes, tokens e temas — é licenciada sob MIT. Não existe plano pago, componente atrás de paywall, nem nada que expire. Uso comercial, modificação e redistribuição estão todos cobertos pela licença.
A aparência vive inteira em classes .lyra-*, entregues como CSS puro e sem etapa de build. Um pacote de framework é um wrapper fino que mapeia props nessas classes. Ou seja, a folha de estilos já funciona em Vue, Blade, LiveView ou HTML escrito à mão hoje — o React é só o wrapper que existe até agora.
Dá, e sem etapa de build. Claro e escuro saem de um único atributo data-theme. Trocar de marca é sobrescrever quatro tokens — --brand, --brand-contrast, --brand-radius e --brand-font — e toda a rampa de destaque é derivada deles. O guia de white-label mostra o caminho.
Acessibilidade faz parte do critério de aceite de cada componente, não de uma passada no fim. Todo componente é renderizado em claro e escuro e varrido com axe a cada mudança, e o contraste da paleta foi conferido em Chromium, Firefox e WebKit — 16 cores-base nos dois temas, nenhuma abaixo de AA.
É um release 0.x, e a versão diz exatamente o que isso significa: usável, ainda não congelado. A API pode mudar antes da 1.0, então fixe a versão que instalar — toda mudança sai por um changeset com sua própria entrada de changelog. Os componentes vêm de um handoff único e são testados em navegador de verdade, não em DOM simulado.

Instale em um minuto. Use para sempre.

Ler a documentaçãoDar uma estrela no GitHub