bibliothèque UI · Documentation

Créez des interfaces évolutives avec votre produitLien vers la section

Commencez avec une application React et Tailwind CSS v4. Installez les paquets publics, chargez les styles et vérifiez un composant avant de construire un écran plus grand.

Installer la bibliothèqueAjoutez les packages, configurez Tailwind et rendez votre premier composant.Faites-en votre propreAppliquez votre marque via des tokens partagés et des thèmes clairs et sombres.

Commencez par l'essentielLien vers la section

Chaque référence de composant comprend un aperçu de travail, un code copiable, des détails sur l'API et des conseils d'accessibilité.

Exemples de composants interactifsLien vers la section

Ouvrir PyColors UI Explorer pour essayer les états des composants et les interactions du clavier dans les thèmes clairs et sombres. Chaque page de composant renvoie directement à son exemple.

Pour mettre en place des exemples dans votre propre application, suivez le guide du consommateur Storybook. Vous pouvez également essayer un Aperçu complet de l'interface ou créer une palette dans Theme Builder.

Règles de compositionLien vers la section

Gardez les pièces petites et connectez-les dans votre application:

Utilisez des tokens sémantiques. Utilitaires comme bg-card, text-muted-foregroundet border-border Gardez les composants cohérents entre les thèmes.
Composez un écran à partir de primitives. Combinez les champs, les boutons, les cartes et les commentaires autour d'une tâche.
Gardez la logique du produit dans votre application. Le routage, la récupération de données, l'authentification et la facturation restent des responsabilités de l'application.

Commencez avec un écran de travail

Vérifiez le style, la focus clavier et la construction de l'application avant de remplacer une zone de produit plus vaste. Les checklist d'installation couvre ces contrôles.

Quand utiliser PatternsLien vers la section

Utilisez un composant pour une partie d'une interface. Utilisez un modèle lorsque plusieurs composants doivent travailler ensemble, tels que la validation, la pagination ou la rétroaction de mutation.

Composer des flux communsEssayez les formulaires de paramètres, les boîtes de dialogue, les tables paginées et enregistrez les commentaires.Construire à partir d'un blocCopiez une section composée lorsque vous avez besoin d'un point de départ plus grand.

Prochaines étapesLien vers la section

AccessibilitéPassez en revue les étiquettes, le comportement du clavier, la focus et les commentaires dans votre application.Orientation en matière de migrationAdoptez progressivement des composants dans une application React ou Next.js existante.