Personnalisation

Les tokens de votre thème#

Les couleurs d'interface des composants et des effets viennent des tokens de shadcn (background, foreground, primary, muted, border, ring…). Elles prennent donc automatiquement les couleurs de votre thème, en clair comme en sombre.

Les dégradés décoratifs (la lumière de GlowBorder, la palette de ScrollTint) ont des couleurs par défaut : remplacez-les par la prop colors, tokens compris (var(--primary)).

Si votre projet n'utilise pas shadcn, déclarez ces variables dans votre CSS Tailwind v4 (voir la documentation de shadcn).

Les props avant tout#

Durées, eases, intensités, couleurs : tout ce qui relève du goût est exposé en props (ou en options de hook), avec des valeurs par défaut soignées. Utilisez le playground de chaque page pour trouver vos réglages, puis copiez le code correspondant :

• pour un effet, le code copié utilise le composant ; la section « Utiliser sans enveloppe » de sa page montre la forme avec le hook ;
• pour une primitive, le playground montre sa mécanique, et l'onglet Code donne la source de la démo.

Modifier le code#

Le code est dans votre projet : modifiez-le librement. Trois conseils pour garder la qualité d'origine :

• gardez le cœur sans dépendance au framework, ce qui permet de partager la logique entre React et Vue ;
• conservez le nettoyage (destroy(), ou la fonction de désabonnement d'une primitive) et le comportement en mouvement réduit ;
• une primitive est partagée par tous vos éléments O-UI : la modifier les touche tous, et le CLI proposera de l'écraser à la prochaine installation (voir Installation).