Styles et thèmes

Les blocs n’utilisent que les tokens de thème shadcn (--primary, --card, --radius …), donc n’importe quel thème shadcn fonctionne, y compris ceux créés avec tweakcn ou l’éditeur de thème shadcn.

Theme Studio

Composez un thème dans le navigateur avec le Theme Studio : choisissez un preset de couleurs, un duo de polices, le rayon, les ombres et la densité, prévisualisez sur un dashboard réel dans n’importe quel pack de styles, puis copiez globals.css et un layout.tsx next/font. Le lien conserve chaque réglage, un thème se partage donc facilement.

Packs de styles

Pro inclut 12 packs de styles. Chacun restyle chaque bloc, les composants Core et vos propres composants shadcn avec un seul attribut sur <html>. goodui Native a les mêmes 12 looks sur son ThemeProvider (look="luxe") :

• Clean: shadcn/ui par défaut. Calme et familier.
• Neobrutal: Bordures épaisses, ombres dures, couleurs criardes.
• Glass: Panneaux givrés sur une aurore douce.
• Retro 98: Biseaux, barres de titre et un bureau turquoise.
• 8-bit: Bordures pixel et typo arcade.
• Terminal: Phosphore vert sur noir, scanlines activées.
• Editorial: Titres serif, filets fins, papier chaud et bordeaux.
• Soft: Surfaces argile, grands rayons, des ombres plutôt que des bordures.
• Neon: Bleu marine profond, lueurs cyan et magenta, une grille discrète.
• Paper: Traits d’encre, badges tampon et libellés mono sur papier.
• Swiss: Blanc, noir, un rouge. Plat, carré, dense.
• Luxe: Presque noir, titres serif et filets dorés.

<html lang="en" data-style="retro98">

Le mode sombre fonctionne comme dans shadcn : ajoutez la classe dark sur <html>. Chaque style a sa variante sombre.

Mouvement réduit

Les effets animés, comme les scanlines du terminal, se désactivent quand l’utilisateur a prefers-reduced-motion activé.