Forma

Frontend · Open Source · 2023

Forma

Biblioteca de componentes React acessíveis e customizáveis, com documentação interativa no Storybook e suporte a temas via CSS custom properties.

Ferramentas

ReactTypeScriptRadix UIStorybookVitestChangesets

Tags

ReactTypeScriptStorybookRadix UI

40+

Componentes disponíveis

94%

Cobertura de testes

3.2k

Downloads semanais no npm

Qual era o desafio?

Times de produto perdiam tempo recriando os mesmos componentes em projetos diferentes, sem consistência visual e sem atenção à acessibilidade.

Contexto do problema

Como chegamos lá

1

Auditoria de componentes usados em 8 projetos diferentes

2

Definição de tokens de design (cores, espaçamento, tipografia)

3

Implementação com Radix UI Primitives como base acessível

4

Estilização com CVA (Class Variance Authority) para variantes

5

Documentação com Storybook e testes com Vitest + Testing Library

6

Publicação no npm e setup de releases automáticos com Changesets

Forma — imagem 1
Forma — imagem 2
Forma — imagem 3
Design final

O resultado

Biblioteca com 40+ componentes, 100% acessíveis (WCAG 2.1 AA), com suporte a dark mode nativo e bundle size otimizado com tree-shaking.