Huit blocs shadcn/ui construits à partir des composants de base, chacun avec un aperçu en direct et du code à copier : carte de connexion, statistiques, sélecteur de tarif, réglages, onglets, confirmation de suppression, état vide et liste d'équipe.
shadcn/ui est un ensemble de composants React que vous copiez dans votre projet avec sa CLI au lieu de l'installer comme dépendance. Ils reposent sur les primitives Radix et sont stylés avec Tailwind. Leur intérêt vient de leur combinaison : voici huit blocs du quotidien, comme une carte de connexion, un sélecteur de tarif et une confirmation de suppression, chacun en direct avec son code.
Ce que vous obtenez
Les aperçus tournent sur cette page avec nos propres copies des mêmes composants, aux couleurs de notre thème, donc les boutons et les coins diffèrent un peu du thème de base. Le code est du shadcn/ui standard et fonctionne après la commande add indiquée en premier.
Oui. shadcn/ui est open source sous licence MIT, vous pouvez donc utiliser et modifier les composants dans des projets commerciaux.
Pas au sens habituel. Il n'y a pas de paquet de composants à mettre à jour ; la CLI copie le code source dans votre projet et il vous appartient dès lors. Les modifications sont faciles, mais les mises à jour sont manuelles.
Oui. Il fonctionne dans toute configuration React avec Tailwind, y compris Vite, React Router et Astro avec React. La CLI vous demande quel framework vous utilisez pendant l'init.
Le site officiel propose un ensemble de blocs, et de nombreux templates de la communauté construisent des pages complètes à partir d'eux. Pour démarrer vite, assemblez des sections comme celles-ci dans une page, ou utilisez un créateur de site pour le site marketing et gardez shadcn/ui pour l'application.
shadcn/ui n'est pas un paquet que vous importez depuis npm. La CLI copie le code source de chaque composant dans votre projet, il vous appartient donc et vous pouvez le modifier.
Les composants utilisés par chaque bloc
Card, Label, Input et Button. Chaque champ a un label visible relié par htmlFor ; le lien secondaire se trouve à côté du label auquel il se rapporte.
Trois cartes dans une grille responsive. tabular-nums empêche les chiffres de sauter quand ils changent.
Un Switch bascule entre prix mensuels et annuels. Le label est cliquable et le changement de prix est annoncé car il se trouve dans une région aria-live.
Chaque ligne associe un Label et une description à un Switch. Utiliser Label htmlFor rend tout le texte cliquable, pas seulement le petit interrupteur.
Les Tabs de shadcn reposent sur Radix, donc les flèches, Home et End fonctionnent déjà et les rôles ARIA sont définis pour vous.
Dialog gère le piégeage du focus, Escape et le retour du focus sur le déclencheur. Faites dire au bouton destructif exactement ce qui va se passer.
Un état vide accueillant indique ce qui apparaîtra ici et propose la seule action qui le remplit.
Avatar affiche la photo et se rabat sur les initiales quand elle manque ou charge encore. L'image a besoin d'un texte alternatif qui nomme la personne.
Vous créez un formulaire ou un tableau de données ? Consultez
Envoyer un e-mail aux clients la veille.
Demander un avis après chaque visite.
Propriétaire
Coiffeur
Se connecter
Utilisez l'e-mail de votre réservation.
Mot de passe
Oublié ?
Payer à l'année
Studio
Choisir Studio
Notifications
Profil
Facturation
Votre nom, votre photo et votre bio.
Votre formule et vos factures.
Supprimer la page
Supprimer "À propos" ?
Cela supprime la page et son lien dans le menu. Action irréversible.
Garder la page
Supprimée (démo uniquement, rien n'a été supprimé).
Aucune réservation pour l'instant
Partagez votre lien de réservation et les nouvelles réservations apparaîtront ici.
Copier le lien de réservation
En ajouter une manuellement
Commencer gratuitement · Sans carte bancaire