Estilos e temas
Os blocos usam apenas tokens de tema do shadcn (--primary, --card, --radius …), então qualquer tema shadcn funciona, inclusive temas feitos com o tweakcn ou o editor de temas do shadcn.
Theme Studio
Monte um tema no navegador com o Theme Studio: escolha um preset de cores, um par de fontes, radius, sombras e densidade, veja a prévia em um dashboard real em qualquer pacote de estilos e depois copie o globals.css e um layout.tsx com next/font. O link guarda todas as configurações, então compartilhar um tema é fácil.
Pacotes de estilos
O Pro inclui 12 pacotes de estilos. Cada um restiliza todos os blocos, os componentes Core e os seus próprios componentes shadcn com um atributo no <html>. O goodui Native tem os mesmos 12 visuais no seu ThemeProvider (look="luxe"):
- Clean: O shadcn/ui padrão. Calmo e familiar.
- Neobrutal: Bordas grossas, sombras duras, cor gritante.
- Glass: Painéis foscos sobre uma aurora suave.
- Retro 98: Bisotês, barras de título e uma área de trabalho azul-petróleo.
- 8-bit: Bordas pixeladas e tipografia de fliperama.
- Terminal: Fósforo verde sobre preto, scanlines ligadas.
- Editorial: Títulos com serifa, linhas finas, papel quente e vermelho-sangue.
- Soft: Superfícies de argila, radius grande, sombras no lugar de bordas.
- Neon: Azul-marinho profundo, brilhos ciano e magenta, uma grade tênue.
- Paper: Linhas de tinta, badges de carimbo e labels mono sobre papel.
- Swiss: Branco, preto, um vermelho. Plano, quadrado, denso.
- Luxe: Quase preto, títulos com serifa e linhas finas douradas.
<html lang="en" data-style="retro98">O modo escuro funciona como no shadcn: adicione a classe dark ao <html>. Todo estilo tem uma variante escura.
Movimento reduzido
Efeitos animados, como as scanlines do terminal, são desligados quando o usuário tem prefers-reduced-motion ativado.