NeobrutalistReact UI Komponenten
Open-Source-UI-Komponenten für React im neobrutalistischen Stil — dicke Rahmen, harte Schatten und kräftige Farben. Installiere sie mit der shadcn CLI oder über deinen AI-Agenten mit unserem MCP-Server. Läuft mit Radix UI, Base UI und React Aria. Der Code liegt in deinem Repo und gehört dir.
Shell command: 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.
Geliebt von Devs, Designern
& Creators
Bin über dein UI-Kit gestolpert und hab es sofort mitgenommen. Beeindruckt: neu, aktiv gepflegt und ständig verbessert. Großartige Arbeit! 🤘
Ziv Reich, Softwareentwickler Wollte nur sagen: großartige Arbeit an neobrutalism.com. Gefällt mir wirklich. Ich bin miserabel im Design, deshalb war das perfekt. Hab es auf meiner persönlichen Seite eingesetzt.
Paul Bratslavsky, Macher von Coding With Paul Endlich meine persönliche Website mit Neobrutalism.com neu gebaut — spaßige Bibliothek, super einfach zum Starten!
Cameron Blackwood, Content Creator Neobrutalism.com ist eine meiner liebsten UI-Komponenten-Bibliotheken im Retro-Stil — Komponenten, die wirklich shippen.
Zhengyang Hou, Indie Hacker eine meiner liebsten ui-bibliotheken fürs web. tolle arbeit — hoffe, es geht steil nach oben.
Taseen Tanvir, Gründer & Designer Habe gerade Neobrutalism.com Pro ausprobiert — ein UI-Kit, das nicht aussieht wie alles andere. Die neobrutalistischen Blöcke 🔥 machen schräge Layouts deutlich schneller.
Nitesh Padghan, Ghostwriter Wunderschönes Landingpage-Design mit perfekter Balance und Flow. Die Farbpalette zusammen mit den Animationen schafft eine außergewöhnliche User Experience.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Ich bin wirklich beeindruckt von dem Design, das sie geliefert haben. Das Endergebnis entsprach genau dem, was ich mir vorgestellt hatte.
Desmond, Mitgründer @ VectorlabsVentures Als Agenturinhaber brauche ich oft Wochen, um Landingpage-Layouts für Kunden zu perfektionieren. Mit Neobrutalism.com stecke ich ein Template ein, passe den Copy an – und bin ship-ready.
Duke Opoku Amankwah, Gründer @ Midas Die Templates sind nicht nur optisch stark, sondern auch unglaublich gut strukturiert. Sie haben uns Wochen Entwicklungszeit gespart.
Abiola Braimah, Developer @ Studio IX Hervorragende Qualität und Liebe zum Detail. Das responsive Design funktioniert auf allen Geräten einwandfrei.
Acromond X., Mitgründer @ VectorlabsVentures Diese Templates in unseren Workflow zu integrieren hat unseren Entwicklungszyklus deutlich verkürzt. Exzellente Arbeit.
Raquib S., Backend-Entwickler Diese Templates sind unsere Go-to-Ressource geworden. Der Code ist sauber, gut dokumentiert und leicht anpassbar.
Hallic M., Developer @ AtlasLabs Neobrutalism.com-Templates treffen die perfekte Balance zwischen Ästhetik und Funktionalität. Ein echter Game-Changer für unsere Projekte.
Ibrahim S., Frontend Lead @ ScaleUp Hervorragender Support und Premium-Templates. Der ROI dieser Templates ist phänomenal.
Kevin K., CEO @ WebCraft Neobrutalism.com-Templates haben komplett verändert, wie wir neue Kundenprojekte angehen. Die Codequalität ist außergewöhnlich und die Designs wirklich world-class.
Danny G., Gründer von DevStack Ich habe viele Template-Bibliotheken genutzt, aber Neobrutalism.com sticht durch Performance-Optimierung und saubere Code-Architektur heraus.
Ian D., CTO bei Wavelength Die Animationen und Micro-Interactions in diesen Templates sind absolut beeindruckend. Beste Investition für unser Design-Team.
Ben S., Lead Designer bei PixelPerfect Als nicht-technischer Gründer haben uns Neobrutalism.com-Templates geholfen, unser MVP in Rekordzeit zu launchen – ohne Designqualität zu opfern. Unsere Investoren waren begeistert.
Matthew I., Startup-Gründer Ich schätze, wie modular und gut dokumentiert diese Komponenten sind. Wir konnten Teile aus verschiedenen Templates nahtlos mischen.
Garrett P., Frontend Lead bei TechFusion Der ROI von Neobrutalism.com-Templates ist unglaublich. Wir haben die Entwicklungszeit dramatisch gesenkt und liefern gleichzeitig hochwertigere Sites an unsere Kunden.
Xavier C., Agentur-Inhaber
Komponente
Galerie „FAQ“
Dieses Raster aus kostenlosen Primitiven – Backends auf jeder Dokumentationsseite, CLI-Installation und wie die Galerie mit /docs /components verknüpft ist.