NéobrutalisteReact UI composants
Des composants React accessibles dans le style néobrutaliste — bordures épaisses, ombres franches, couleurs éclatantes. Chacun existe en version Radix UI, Base UI et React Aria, s’installe avec le CLI shadcn et vous appartient entièrement.
Bouton
01/07S'enfonce dans sa propre ombre dure.
npx shadcn add neobrutalism.com/r/base/button.json- 50+ composants
- Bordures épaisses, ombres dures
- Install CLI shadcn
- Radix · Base UI · React Aria
- Open source
- Accessible par défaut
- Le code est à vous
- Serveur MCP
- Mode sombre & RTL
- Petites étiquettes bien visibles
Tous les composants
Accordéon
Un ensemble de sections extensibles disposées verticalement pour les FAQ, les paramètres et les pages riches en contenu — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Alerte
Une infobulle intégrée pour signaler les erreurs de formulaire, les avertissements et les confirmations de réussite — des encadrés aux couleurs correspondant à l'état, dotés de bordures néobrutalistes et d'ombres portées marquées.
Avatar
Une image d'utilisateur avec, à défaut, ses initiales, pour les menus de profil, les fils de commentaires et les listes d'équipes — avec un effet « néobrutaliste » à bordures épaisses.
Badge
Une petite étiquette destinée aux statuts, aux nombres et aux balises sur les cartes, les tableaux et les éléments de navigation — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Barre de menu
Une barre horizontale de menus déroulants destinée aux barres d'outils, éditeurs et tableaux de bord de type application — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Barre latérale
Un panneau de navigation modulable de type « app-shell » destiné aux tableaux de bord, aux documents et aux outils d'administration — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Bascule
Un bouton à deux positions (marche/arrêt) permettant de contrôler la mise en forme de la barre d'outils, la désactivation du son et l'épinglage — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Boîte de dialogue d'alerte
Une fenêtre modale qui interrompt le déroulement des actions irréversibles — suppression, déconnexion, annulation —, avec un style néobrutaliste mêlant contours et ombres.
Bouton
Un élément cliquable pour l'envoi de formulaires, les barres d'outils et les confirmations d'actions irréversibles — doté de bordures épaisses et d'une ombre qui s'accentue lorsque vous cliquez dessus.
Calendrier
Un sélecteur de dates sous forme de grille mensuelle pour les réservations, la planification et la sélection de plages horaires — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Carrousel
Un diaporama à faire défiler pour les galeries de produits, les témoignages et les sections phares — agrémenté de bordures néobrutalistes et d'ombres marquées.
Carte
Une boîte encadrée destinée aux tableaux de bord, aux niveaux tarifaires et aux grilles de produits — en-tête, contenu et pied de page, avec un effet d'ombre dure de style néobrutaliste.
Carte au survol
Un aperçu flottant qui s'ouvre au survol — aperçus de profils, aperçus de liens, termes du glossaire — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Case à cocher
Un bouton binaire pour les cases de consentement, les filtres à sélection multiple et la sélection groupée de lignes — avec un style néobrutaliste alliant bordures et ombres.
Champ
Champs de libellé, de contrôle, d'aide et d'erreur pour les panneaux de paramètres, les formulaires de paiement et les processus d'inscription — avec un style de mise en page « néobrutaliste ».
Champ de saisie
Un champ de texte à une seule ligne destiné aux identifiants de connexion, aux barres de recherche et aux formulaires de paiement — avec un effet néobrutaliste caractérisé par une bordure épaisse et une ombre prononcée.
Commande
Une palette de commandes accessible via le clavier pour les menus ⌘K, la recherche globale et les actions rapides — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Curseur
Un champ de saisie glissable permettant de sélectionner une valeur ou une plage — volume, filtres de prix, paramètres —, avec un style néobrutaliste caractérisé par des bordures et des ombres.
Dialogue
Une fenêtre modale destinée aux confirmations, aux formulaires rapides et aux invites relatives à des actions irréversibles — superposée à la page, avec des bordures épaisses et une ombre prononcée.
Direction
Un fournisseur de contexte qui permet de basculer les composants entre les orientations LTR et «RTL », afin que les menus, les curseurs et les onglets s'affichent correctement en arabe, en hébreu et en persan.
Élément
Une ligne flexible comportant des emplacements pour les médias, le titre, la description et l'action, destinée aux flux de notifications, aux listes de paramètres et aux lignes de fichiers — dans un style néobrutaliste.
Fil d'Ariane
Indique la place qu'occupe la page dans la hiérarchie du site — parcours de liens vers les documents, les catégories de la boutique et les tableaux de bord — dans une police néobrutaliste en gras.
Groupe de bascules
Groupes de boutons à deux états pour les barres d'outils d'édition, les sélecteurs de vue et les barres de filtrage — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Groupe de boutons
Fuses regroupe les boutons, les barres d'outils et les modules complémentaires de saisie au sein d'un seul élément encadré : une bordure épaisse, une ombre portée marquée, une action commune.
Groupe de champs
Ajoutez des icônes, des boutons et des infobulles aux champs de saisie des barres de recherche, des champs d'URL et des fenêtres de discussion, avec des bordures et des ombres de style néobrutaliste.
Groupe radio
Un ensemble de boutons radio à choix unique pour les formulaires relatifs aux formules d'abonnement, aux options de livraison et aux paramètres — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Indicateur de chargement
Un indicateur de chargement animé pour les soumissions en attente, les récupérations de données et les états « occupé » intégrés — une icône prête à l'emploi pour n'importe quel contrôle « néobrutaliste ».
Infobulle
Des infobulles au survol et à la mise au premier plan pour les boutons iconiques, les raccourcis clavier et les libellés tronqués — avec un effet « néobrutaliste » combinant bordure et ombre.
Interrupteur
Un bouton bascule « activé/désactivé » permettant de modifier instantanément certains paramètres — notifications, mode sombre, options expérimentales —, le tout dans un style néobrutaliste caractérisé par des contours et des ombres.
Libellé
Légende pour les champs de saisie, les cases à cocher, les boutons à bascule et les groupes de boutons radio — les clics activent le contrôle, le texte étant affiché dans la police « néobrutaliste » utilisée pour les titres.
Liste combinée
Un champ de saisie à saisie semi-automatique qui filtre les options au fur et à mesure que vous tapez — sélecteurs de pays, champs de saisie de balises, listes déroulantes longues — avec des bordures et des ombres de style néobrutaliste.
Liste de sélection
Un menu déroulant permettant de sélectionner une option — champs de pays, ordres de tri, paramètres de thème —, doté de bordures épaisses de style néobrutaliste et d'ombres marquées.
Liste native
Le menu déroulant HTML natif repensé pour les formulaires, les filtres et les sélecteurs de pays — menu déroulant affiché par le système d'exploitation, avec des bordures et des ombres de style néobrutaliste.
Menu contextuel
Un menu contextuel accessible par un clic droit sur les lignes de fichiers, les canevas et les grilles de données — des actions contextuelles agrémentées d'un style néobrutaliste mêlant bordures et ombres.
Menu de navigation
Une barre horizontale comportant des liens et des menus déroulants destinés aux en-têtes de site, aux barres de navigation des documents et aux interfaces d'application — avec des bordures de style néobrutaliste et des ombres marquées.
Menu déroulant
Un menu accessible par un bouton permettant d'effectuer des actions sur les lignes, de changer de compte et de sélectionner des options d'affichage — le tout avec un style néobrutaliste caractérisé par des bordures et des ombres.
Onglets
Passez d'un panneau de contenu à l'autre — pages de paramètres, tableaux de bord et aperçus de code — grâce au style néobrutaliste caractérisé par des bordures et des ombres.
Pagination
Liens vers les pages numérotées avec des commandes « Précédent » et « Suivant » pour les résultats de recherche, les tableaux et les archives — dans le style néobrutaliste « bordures et ombres ».
Panneau latéral
Un panneau qui s'affiche en coulissant depuis le bord de l'écran pour les menus de navigation, les filtres et les formulaires de modification — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Popover
Un panneau flottant associé à un élément déclencheur pour les sélecteurs de date, les filtres et les formulaires intégrés — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Progression
Une barre fine qui se remplit au fur et à mesure qu’une tâche est effectuée — téléchargements, installations, processus d’intégration en plusieurs étapes —, avec un effet « néobrutaliste » combinant contours et ombres.
Raccourci clavier
Touches de clavier indiquant les raccourcis dans les menus, les infobulles et les palettes de commandes — un élément « kbd » natif doté de bordures et d'ombres de style néobrutaliste.
Ratio d'aspect
Limite les images, les vidéos intégrées et les cartes à un rapport d'aspect fixe lorsqu'elles sont redimensionnées — l'utilitaire de mise en page qui permet de maintenir les cartes néobrutalistes alignées sur la grille.
Redimensionnable
Des volets divisibles et déplaçables pour les éditeurs de code, les arborescences de fichiers et les mises en page de tableaux de bord — avec un style néobrutaliste caractérisé par des bordures et des ombres.
Saisie OTP
Champ de saisie d'un code à usage unique pour l'authentification à deux facteurs (2FA), la vérification de connexion et les écrans de code PIN — champs permettant le collage, avec des bordures de style néobrutaliste et des ombres marquées.
Section repliable
Une paire « déclencheur-panneau » destinée aux arborescences de fichiers, aux paramètres avancés et aux sections « Afficher plus » — avec un traitement néobrutaliste des bordures et des ombres.
Sélecteur de date
Un calendrier contextuel permettant de sélectionner des dates ponctuelles, des plages de dates et des anniversaires dans des formulaires et des filtres — avec des bordures de style néobrutaliste et des ombres marquées.
Séparateur
Une ligne horizontale ou verticale qui sépare les menus, les barres d'outils et les listes — tracée dans la même couleur de bordure unie que les cadres néobrutalistes.
Sonner
Des notifications superposées de type « toast » pour les confirmations d'enregistrement, les téléchargements et les fenêtres d'annulation — avec un style néobrutaliste mêlant bordures et ombres.
Squelette
Un bloc de remplacement clignotant destiné aux cartes, aux avatars et aux tableaux pendant le chargement des données — avec un effet néobrutaliste à bordures épaisses.
Tableau
Un tableau HTML sémantique destiné aux factures, aux listes administratives et aux grilles tarifaires — lignes bordées, en-têtes en gras et ombre néobrutaliste marquée.
Tableau de données
Des tableaux triables, filtrables et paginés pour les panneaux d'administration, les tableaux de bord et les listes de commandes — avec un style « néobrutaliste » caractérisé par des bordures et des ombres.
Tiroir
Une feuille contrôlée par gestes qui s'affiche en glissant depuis n'importe quel bord, destinée aux menus mobiles, aux filtres et aux formulaires rapides — avec des bordures et des ombres de style néobrutaliste.
Typographie
Recettes polyvalentes pour les titres, le corps du texte, les listes, les tableaux et le code en ligne — mises en page dans un style néobrutaliste au rendu imposant.
Vide
Élément de remplacement pour les recherches sans résultat, les tableaux de bord vides et les écrans de premier lancement : icône, titre et action encadrés par des bordures de style néobrutaliste.
Zone de défilement
Un conteneur défilable doté de barres de défilement personnalisées et compatibles avec tous les navigateurs, destiné aux fenêtres de discussion, aux barres latérales et aux arborescences de fichiers — avec un curseur « chunky » de style néobrutaliste.
Zone de texte
Un champ de saisie de texte multiligne destiné aux commentaires, aux biographies et aux messages d'assistance — avec un style néobrutaliste mêlant bordures et ombres.