NeobrutalistReact UI Komponenten
Barrierefreie React-Komponenten im neobrutalistischen Stil — dicke Rahmen, harte Schatten, laute Farben. Jede gibt es in einer Radix-UI- und einer Base-UI-Variante, installierbar mit der shadcn-CLI, ausgeliefert als Code, der dir gehört.
Button
01/07Drückt sich in den eigenen harten Schatten.
npx shadcn add neobrutalism.com/r/base/button.json- 50+ Komponenten
- Dicke Rahmen, harte Schatten
- shadcn-CLI Installation
- Radix · Base UI · React Aria
- Open Source
- Von Haus aus barrierefrei
- Der Code gehört dir
- MCP-Server
- Dark Mode & RTL
- Laute kleine Labels
Alle Komponenten
Akkordeon
Eine vertikal angeordnete Reihe ausklappbarer Abschnitte für FAQs, Einstellungen und inhaltsreiche Seiten – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Auswahl
Ein Dropdown-Menü zur Auswahl einer Option – Länderfelder, Sortierreihenfolgen, Design-Einstellungen – mit dicken, im Neobrutalismus-Stil gehaltenen Rahmen und starken Schatten.
Avatar
Ein Benutzerbild mit Initialen als Ausweichlösung für Profilmenüs, Kommentarthreads und Teamlisten – im neobrutalistischen Stil mit dickem Rahmen.
Badge
Ein kleines Label für Statusangaben, Zahlen und Tags auf Karten, Tabellen und Navigationselementen – mit dem neobrutalistischen Stil aus Rahmen und Schatten.
Befehl
Eine über die Tastatur bedienbare Befehlspalette für ⌘K-Menüs, die globale Suche und Schnellaktionen – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Beschriftung
Eine Beschriftung für Eingabefelder, Kontrollkästchen, Schalter und Optionsfeldgruppen – durch Klicken wird das Steuerelement aktiviert, gesetzt in der neobrutalistischen Überschriftenschrift.
Brotkrumen
Zeigt in fetter, neobrutalistischer Schrift an, wo sich die Seite in der Website-Hierarchie befindet – mit Linkpfaden für Dokumente, Shop-Kategorien und Dashboards.
Button
Ein anklickbarer Auslöser für Formularabsendungen, Symbolleisten und Bestätigungsfelder mit destruktiver Wirkung – mit dicken Rändern und einem Schatten, in den er beim Klicken einsinkt.
Button-Gruppe
Fuses vereint Schaltflächen, Symbolleisten und Eingabe-Add-ons in einer gerahmten Einheit – ein dicker Rahmen, ein harter Schatten, eine gemeinsame Betätigung.
Datentabelle
Sortierbare, filterbare und paginierte Tabellen für Admin-Bereiche, Dashboards und Bestelllisten – mit dem „Neobrutalismus“-Stil aus Rahmen und Schatten.
Datumsauswahl
Ein Popover-Kalender zur Auswahl einzelner Daten, Datumsbereiche und Geburtstage in Formularen und Filtern – mit neobrutalistischen Rahmen und harten Schatten.
Dialog
Ein modales Fenster für Bestätigungen, Schnellformulare und Abfragen zu irreversiblen Aktionen – über der Seite eingeblendet, mit dicken Rahmen und einem kräftigen Schatten.
Dropdown-Menü
Ein per Knopfdruck aufrufbares Menü für Zeilenaktionen, Kontowechsel und Anzeigeoptionen – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Eingabe
Ein einzeiliges Textfeld für Anmeldungen, Suchleisten und Bestellformulare – mit dem neobrutalistischen Stil mit dickem Rahmen und starkem Schatten.
Eingabegruppe
Füge Symbolen, Schaltflächen und Tastaturhinweisen für Suchleisten, URL-Felder und Chat-Editoren hinzu – mit neobrutalistischen Rahmen und Schatten.
Einklappbar
Ein Trigger-und-Panel-Paar für Dateibäume, erweiterte Einstellungen und „Mehr anzeigen“-Bereiche – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Element
Eine flexible Zeile mit Feldern für Medien, Titel, Beschreibung und Aktionen für Benachrichtigungsfeeds, Einstellungslisten und Dateizeilen – im Neobrutalismus-Stil.
Feld
Bezeichnungen, Steuerelemente, Hilfetexte und Fehlermeldungen für Einstellungsfelder, Checkout-Formulare und Anmeldeabläufe – im neobrutalistischen Formularstil.
Fortschritt
Ein schmaler Balken, der sich füllt, sobald eine Aufgabe abgeschlossen ist – Uploads, Installationen, mehrstufige Einrichtungsprozesse –, gestaltet im neobrutalistischen Stil mit Rahmen und Schatten.
Größenveränderbar
Verschiebbare geteilte Fenster für Code-Editoren, Dateibäume und Dashboard-Layouts – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Hover-Karte
Eine schwebende Vorschau, die sich beim Darüberfahren mit der Maus öffnet – Profil-Einblicke, Link-Vorschauen, Glossarbegriffe – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Kalender
Ein Datumswähler im Monatsraster für Buchungen, Terminplanung und Bereichsauswahl – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Karte
Ein umrandetes Feld für Dashboards, Preisstufen und Produkttabellen – Kopfzeile, Inhalt und Fußzeile mit dem neobrutalistischen „Hard-Shadow“-Effekt.
Karussell
Eine wischbare Diashow für Produktgalerien, Kundenstimmen und Hero-Bereiche – mit neobrutalistischen Rahmen und harten Schatten.
Kombinationsfeld
Ein Eingabefeld mit Autovervollständigung, das die Optionen während der Eingabe filtert – Länderauswahl, Tag-Eingaben, lange Auswahllisten – mit neobrutalistischen Rahmen und Schatten.
Kontextmenü
Ein Rechtsklick-Menü für Dateizeilen, Arbeitsflächen und Datentabellen – kontextbezogene Aktionen im neobrutalistischen Stil mit Rahmen und Schatten.
Kontrollkästchen
Ein Umschalter für Einwilligungsfelder, Filter mit Mehrfachauswahl und die Auswahl mehrerer Zeilen auf einmal – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Ladeanzeige
Eine animierte Ladeanzeige für ausstehende Übermittlungen, Abrufe und Inline-Belegtzustände – ein Symbol, das sich nahtlos in jedes Neobrutalismus-Steuerelement einfügen lässt.
Leer
Ein Platzhalter für Suchanfragen ohne Ergebnisse, leere Dashboards und Startbildschirme – Symbol, Titel und Aktion, eingerahmt von neobrutalistischen Rahmen.
Menüleiste
Eine horizontale Leiste mit Dropdown-Menüs für Toolbars, Editoren und Dashboards im App-Stil – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Native Auswahl
Das native HTML-Select-Element, neu gestaltet für Formulare, Filter und Länderauswahl – ein vom Betriebssystem gerendertes Dropdown-Menü mit neobrutalistischen Rahmen und Schatten.
Navigationsmenü
Eine horizontale Leiste mit Links und Dropdown-Feldern für Seitenkopfzeilen, Dokumentennavigationen und App-Shells – mit neobrutalistischen Rahmen und harten Schatten.
Optionsgruppe
Eine Reihe von Radiobuttons mit einer Auswahlmöglichkeit für Tarife, Versandoptionen und Einstellungsformulare – im neobrutalistischen Stil mit Rahmen und Schatten.
OTP-Eingabe
Einmalige Codeeingabe für 2FA, Anmeldebestätigung und PIN-Bildschirme – Felder, in die man den Code einfügen kann, mit neobrutalistischen Rahmen und harten Schatten.
Paginierung
Nummerierte Seitenlinks mit Vor-/Zurück-Schaltflächen für Suchergebnisse, Tabellen und Archive – im neobrutalistischen „Borders-and-Shadows“-Stil.
Popover
Ein schwebendes Feld, das an einen Trigger für Datumsauswahlfelder, Filter und Inline-Formulare gekoppelt ist – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Richtung
Ein Kontext-Provider, der Komponenten zwischen LTR und RTL umschaltet, sodass Menüs, Schieberegler und Registerkarten auf Arabisch, Hebräisch und Persisch korrekt gespiegelt werden.
Schalter
Ein Ein-/Aus-Schalter für Sofort-Einstellungen – Benachrichtigungen, Dunkelmodus, Feature-Flags – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Schieberegler
Ein verschiebbares Eingabefeld zur Auswahl eines Werts oder Bereichs – Lautstärke, Preisfilter, Einstellungen – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Schublade
Ein gestengesteuertes Fenster, das von jeder Kante her eingerutscht wird – für mobile Menüs, Filter und Schnellformulare – mit neobrutalistischen Rahmen und Schatten.
Scrollbereich
Ein scrollbarer Container mit benutzerdefinierten, browserübergreifenden Bildlaufleisten für Chat-Fenster, Seitenleisten und Dateibäume – mit einem klobigen, neobrutalistischen Schieberegler.
Seitenblatt
Ein Panel, das vom Bildschirmrand herangeschoben wird und Platz für Navigationsleisten, Filter und Bearbeitungsformulare bietet – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Seitenleiste
Ein einklappbares App-Shell-Navigationspanel für Dashboards, Dokumente und Admin-Tools – mit dem „Neobrutalismus“-Stil aus Rahmen und Schatten.
Seitenverhältnis
Passt Bilder, eingebettete Videos und Karten beim Skalieren an ein festes Seitenverhältnis an – das Layout-Tool, das dafür sorgt, dass die Karten im Neobrutalismus-Stil im Raster bleiben.
Skelett
Ein pulsierender Platzhalterblock für Karten, Avatare und Tabellen, während die Daten geladen werden – mit dem neobrutalistischen Stil mit dicken Rahmen.
Sonner
Übereinanderliegende Toast-Benachrichtigungen für Speicherbestätigungen, Uploads und Rückgängig-Fenster – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Tabelle
Eine semantische HTML-Tabelle für Rechnungen, Verwaltungslisten und Preistabellen – mit umrandeten Zeilen, fettgedruckten Überschriften und einem markanten Schatten im Neobrutalismus-Stil.
Tabs
Wechsle zwischen den übereinanderliegenden Inhaltsbereichen – Einstellungsseiten, Dashboards und Code-Vorschauen – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Tastenkürzel
Tastatur-Tastenkappen für Shortcut-Hinweise in Menüs, Tooltips und Befehlspaletten – ein natives „kbd“-Element mit neobrutalistischen Rahmen und Schatten.
Textbereich
Ein mehrzeiliges Texteingabefeld für Kommentare, Biografien und Support-Nachrichten – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Tooltip
Hover- und Fokus-Hinweise für Symbolschaltflächen, Tastaturkürzel und gekürzte Beschriftungen – mit dem neobrutalistischen Rahmen- und Schatten-Design.
Trennlinie
Eine horizontale oder vertikale Linie, die Menüs, Symbolleisten und Listen voneinander trennt – in derselben durchgehenden Rahmenfarbe wie die neobrutalistischen Rahmen.
Typografie
Allzweck-Vorlagen für Überschriften, Fließtext, Listen, Tabellen und Inline-Code – gesetzt im neobrutalistischen Heavy-Weight-Stil.
Umschalter
Ein Zwei-Zustands-Ein-/Aus-Schalter für die Formatierungs-, Stummschalt- und Anheftungsfunktionen der Symbolleiste – mit dem neobrutalistischen Design aus Rahmen und Schatten.
Umschaltgruppe
Zweistufige Schaltflächengruppen für Editor-Symbolleisten, Ansichtsumschalter und Filterleisten – mit dem neobrutalistischen Design mit Rahmen und Schatten.
Warndialog
Ein Modal, das den Ablauf bei irreversiblen Aktionen – Löschen, Abmelden, Verwerfen – unterbricht, mit dem neobrutalistischen Design aus Rahmen und Schatten.
Warnung
Eine Inline-Anzeige für Formularfehler, Warnungen und Erfolgsmeldungen – statusfarbene Felder mit neobrutalistischen Rahmen und harten Schatten.