William Rafael
Voltar para o blog
shadcn-uishadcn-uiUIAcessibilidade

Boas práticas com shadcn/ui: acessibilidade, variantes e consistência

shadcn/ui acelera muito, mas exige disciplina: padronize variantes, componha estilos semânticos e não sacrifique acessibilidade.

15 de junho de 2023
1 min
Por willsamy
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

- 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.

Tags

shadcn-uiUIAcessibilidadeFrontend

Gostou do conteúdo?

Confira outros artigos do blog ou entre em contato para discutir projetos!

Boas práticas com shadcn/ui: acessibilidade, variantes e consistência | William Rafael