O shadcn/ui é excelente para ganhar produtividade com componentes bem desenhados e estilizados via Tailwind. Para longividade, é fundamental adotar práticas consistentes.
1) Variantes previsíveis
1) Variantes previsíveis
- Use padrões com variant e size como Convenção (btn: primary/secondary/ghost, sm/md/lg).
- Exponha poucas variantes significativas; evite explosão combinatória.
- Documente quando criar uma nova variante — qual o uso e contexto?
#2) Acessibilidade vem de fábrica
- Respeite as props aria-* e estados de foco.
- Garanta contraste de cores nas variantes e no dark mode.
- Utilize o que a lib já provê (ex.: AlertDialog, Dialog) antes de reinventar.
## 3) Composição, não duplicação
- Estenda componentes por composição (slots) ao invés de copiar e colar.
- Utilize asChild quando pertinente para preservar semântica de tags.
## 4) Tokens e tema
- Centralize tokens no Tailwind e mantenha a UI coerente entre componentes.
- Evite util classes arbitrárias nos componentes de base; padronize via tokens.
## 5) Testabilidade
- Use data-testid em componentes críticos para e2e.
- Mantenha contratos estáveis nas variantes para evitar quebrar snapshots.
## Conclusão
shadcn/ui entrega velocidade sem abrir mão de qualidade, desde que você imponha limites e padrões. O ganho é um sistema coeso e acessível, fácil de evoluir.
- Respeite as props
aria-* e estados de foco.- Garanta contraste de cores nas variantes e no dark mode.
- Utilize o que a lib já provê (ex.: AlertDialog, Dialog) antes de reinventar.
## 3) Composição, não duplicação
- Estenda componentes por composição (slots) ao invés de copiar e colar.
- Utilize
asChild quando pertinente para preservar semântica de tags.## 4) Tokens e tema
- Centralize tokens no Tailwind e mantenha a UI coerente entre componentes.
- Evite util classes arbitrárias nos componentes de base; padronize via tokens.
## 5) Testabilidade
- Use
data-testid em componentes críticos para e2e.- Mantenha contratos estáveis nas variantes para evitar quebrar snapshots.
## Conclusão
shadcn/ui entrega velocidade sem abrir mão de qualidade, desde que você imponha limites e padrões. O ganho é um sistema coeso e acessível, fácil de evoluir.