Bibliothèque de composants réutilisables pour votre site vitrine
Palette de Couleurs
Couleurs Text
Palette des couleurs de texte définies dans tailwind.config.ts
Primary
#442B23
Brun chaud
Secondary
#FDF7F0
Crème doux
Muted
#BBAFA5
Beige-gris doux
Accent
#D9715C
Corail/terracotta
Couleurs Background
Palette des couleurs d'arrière-plan définies dans tailwind.config.ts
Primary
#FFF9F3
Fond crème
Secondary
#D6D2C4
Sable doux
Accent
#F0C987
Doré clair
Boutons
Cartes
Carte Simple
Description de la carte
Contenu de la carte avec du texte d'exemple.
Carte Élevée
Avec effet de survol
Cette carte a un effet d'élévation au survol.
Carte Contour
Bordure plus visible
Cette carte a une bordure plus prononcée.
Badges
Formulaires
Modal
Typographie
Polices personnalisées
Démonstration de toutes les polices disponibles dans le design system
Police Titre - Playfair Display
Titre Principal - 4xl
Titre Secondaire - 3xl
Titre Tertiaire - 2xl
Titre Quaternaire - xl
Paragraphe avec police titre - lg
Paragraphe avec police titre - base
Police Texte - Montserrat
Titre Principal - 4xl
Titre Secondaire - 3xl
Titre Tertiaire - 2xl
Titre Quaternaire - xl
Paragraphe avec police texte - lg
Paragraphe avec police texte - base
Petit texte avec police texte - sm
Police Système - Geist Sans
Titre Principal - 4xl
Titre Secondaire - 3xl
Titre Tertiaire - 2xl
Titre Quaternaire - xl
Paragraphe avec police système - lg
Paragraphe avec police système - base
Petit texte avec police système - sm
Police Monospace - Geist Mono
Titre Principal - 4xl
Titre Secondaire - 3xl
Titre Tertiaire - 2xl
Titre Quaternaire - xl
Paragraphe avec police monospace - lg
Paragraphe avec police monospace - base
Petit texte avec police monospace - sm
Comparaison des polices
Titre avec police titre
Design System
Playfair Display - Élégant pour les titres
Titre avec police texte
Design System
Montserrat - Moderne pour le contenu
Titre avec police système
Design System
Geist Sans - Système par défaut
Titre avec police monospace
Design System
Geist Mono - Code et données
Exemples d'usage pratique
Page d'accueil
Utilisez la police titre pour les grands titres et la police texte pour le contenu principal. Cette combinaison crée une hiérarchie visuelle claire et professionnelle.
Carte de produit
Description du produit avec la police texte pour une excellente lisibilité.
const product = { id: 1, name: "Produit" };Toasts
Types de notifications
Différents types de toasts avec leurs couleurs respectives
Positions des Toasts
Différentes positions d'affichage
Testez les différentes positions de notifications
Fonctionnalités avancées
Toasts avec options spéciales
Testez les fonctionnalités avancées des toasts