Introduction
Une collection de composants réutilisables pour construire vos interfaces.
BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.
Les composants sont des éléments d'interface unitaires (bouton, champ, carte, dialogue...) prêts à être installés dans votre projet via la CLI shadcn.
Utilisation
Parcourez la liste dans la barre latérale pour voir un aperçu de chaque composant, son code source et ses props disponibles.
Motion
Les jetons, les règles et les primitives d'animation partagés par tous les composants de `@whoa-studio/ui`.
Headers
Composants d'en-tête pour afficher des titres hiérarchisés.
Input
Un composant d'entrée de texte avec icônes et états de validation.
Shortcut
Affiche des raccourcis clavier composables, avec touches de modification adaptées à la plateforme.
Button
Un composant de bouton pour afficher des éléments interactifs.
Gandi Button
Un bouton inspiré du design de Gandi.net.
Apple Button
Un bouton inspiré des Human Interface Guidelines d'Apple.
Shopify Button
Un bouton inspiré du design system Polaris de Shopify.
Accordion
Sections repliables, une ou plusieurs ouvertes à la fois.
Alert
Un message en ligne, avec une icône, un titre et une description.
Alert Dialog
Une modale qui demande une confirmation avant une action destructive.
Avatar
Une image de profil avec un repli sur les initiales.
Button
Le bouton de base, en plusieurs variantes.
Checkbox
Une case à cocher accessible.
Collapsible
Un panneau qui se déplie sous son déclencheur.
Combobox
Un champ avec suggestions filtrées pendant la frappe.
Context Menu
Un menu ouvert par clic droit.
Dialog
Une modale pour un formulaire ou un contenu ciblé.
Dropdown Menu
Un menu d’actions ouvert depuis un bouton.
Empty
Un état vide avec icône, titre et description.
Field
Un champ de formulaire avec libellé, aide et erreur.
Hover Card
Un aperçu affiché au survol d’un lien.
Input OTP
Un champ pour saisir un code à usage unique.
Menubar
Une barre de menus à la manière d’une application de bureau.
Navigation Menu
Une navigation principale avec panneaux déroulants.
Popover
Un panneau flottant ancré à son déclencheur.
Progress
Une barre de progression.
Radio Group
Un choix unique parmi plusieurs options.
Select
Une liste déroulante pour choisir une valeur.
Sheet
Un panneau qui glisse depuis un bord de l’écran.
Skeleton
Des blocs de remplacement pendant un chargement, et un spinner.
Switch
Un interrupteur entre deux états.
Tabs
Des onglets pour basculer entre des vues.
Toggle
Un bouton à deux états.
Tooltip
Une info-bulle affichée au survol ou au focus.
Dream Sky
Fond WebGL onirique, avec ciel dégradé, nuages, cercles concentriques et traînées prismatiques.
ASCII Black Hole
Fond plein cadre de glyphes ASCII qui tournent en spirale vers un trou noir, dessiné sur un seul canvas.