NeobrutalistischReact UI componenten
Open-source React UI-componenten met een neobrutalistische look — dikke randen, harde schaduwen en felle kleuren. Installeer ze met de shadcn CLI, of via je AI-agent en onze MCP-server. Werkt met Radix UI, Base UI en React Aria. De code komt in je repo terecht en blijft van jou.
Shell command: npx shadcn add neobrutalism.com/r/base/button.json- 50+ onderdelen
- Dikke randen, harde schaduwen
- shadcn CLI installeren
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- Standaard toegankelijk
- De code is van jou
- MCP serverondersteuning
- Donkere modus en RTL
- Luidruchtige kleine labels
Alle componenten
Accordeon
Een verticaal gestapelde reeks uitklapbare secties voor veelgestelde vragen, instellingen en pagina’s met veel inhoud — met die neobrutalistische stijl van randen en schaduwen.
Avatar
Een gebruikersafbeelding met initialen als alternatief voor profielmenu’s, reactiethreads en teamlijsten — met die neobrutalistische stijl met dikke randen.
Badge
Een klein label voor statussen, aantallen en tags op kaarten, tabellen en navigatie-items — met die neobrutalistische stijl van randen en schaduwen.
Beeldverhouding
Zorgt ervoor dat afbeeldingen, ingesloten video’s en kaarten bij het vergroten of verkleinen een vaste verhouding behouden — de lay-outfunctie die ervoor zorgt dat neobrutalistische kaarten binnen het raster blijven.
Carrousel
Een diavoorstelling die je kunt doorbladeren voor productgalerijen, getuigenissen en hero-secties — met neobrutalistische randen en scherpe schaduwen.
Combobox
Een invoerveld met automatische aanvulling dat opties filtert terwijl je typt — landenkeuzelijsten, tag-invoervelden, lange keuzelijsten — met neobrutalistische randen en schaduwen.
Contextmenu
Een rechtsklikmenu voor bestandsrijen, canvassen en gegevensrasters — contextgebonden acties met die neobrutalistische stijl van randen en schaduwen.
Datumpicker
Een pop-upkalender waarmee je in formulieren en filters losse datums, datumbereiken en verjaardagen kunt selecteren — met neobrutalistische randen en scherpe schaduwen.
Dialoog
Een modaal venster voor bevestigingen, snelle formulieren en waarschuwingen bij ingrijpende acties — dat over de pagina heen wordt weergegeven met dikke randen en een scherpe schaduw.
Dropdownmenu
Een menu dat je met een knop kunt openen voor rijacties, het wisselen tussen accounts en weergaveopties — met die neobrutalistische stijl van randen en schaduwen.
Gegevenstabel
Tabellen die je kunt sorteren, filteren en pagineren voor beheerderspaneel, dashboards en bestellijsten — met die neobrutalistische stijl van randen en schaduwen.
Herschalbaar
Versleepbare gesplitste vensters voor code-editors, bestandsboomstructuren en dashboardlay-outs — met die neobrutalistische stijl van randen en schaduwen.
Hoverkaart
Een zwevend voorbeeldvenster dat verschijnt als je er met de muis overheen gaat — profielvoorbeelden, linkvoorbeelden, woordenlijsttermen — met die neobrutalistische stijl van randen en schaduwen.
Inklapbaar
Een combinatie van een trigger en een paneel voor bestandsstructuren, geavanceerde instellingen en ‘meer weergeven’-secties — met die neobrutalistische stijl van randen en schaduwen.
Invoergroep
Voeg pictogrammen, knoppen en toetsenbordhints toe aan invoervelden voor zoekbalken, URL-velden en chatvensters — met neobrutalistische randen en schaduwen.
Invoerveld
Een tekstveld met één regel voor inlogvensters, zoekbalken en afrekenformulieren — met de neobrutalistische stijl met dikke randen en scherpe schaduwen.
Item
Een flexibele rij met velden voor media, titel, beschrijving en actie, bedoeld voor meldingsfeeds, instellingenlijsten en bestandsrijen — in neobrutalistische stijl.
Kaart
Een kader met rand voor dashboards, prijsniveaus en productoverzichten — koptekst, inhoud en voettekst met de neobrutalistische harde schaduw.
Kalender
Een datumkiezer met maandoverzicht voor boekingen, planning en het selecteren van periodes — met die neobrutalistische stijl van randen en schaduwen.
Keuzegroep
Een reeks keuzerondjes voor abonnementen, verzendopties en instellingenformulieren — met die neobrutalistische stijl van randen en schaduwen.
Knop
Een klikbare knop voor het verzenden van formulieren, werkbalken en bevestigingsvensters die iets onomkeerbaars doen — met dikke randen en een schaduw waarin hij bij het klikken wegzakt.
Knoppengroep
Het combineert knoppen, werkbalken en invoer-add-ons tot één omkaderd geheel — één dikke rand, één scherpe schaduw, één gezamenlijke druk.
Kruimelpad
Geeft aan waar de pagina zich in de hiërarchie van de site bevindt — navigatiepaden voor documenten, winkelcategorieën en dashboards — in vetgedrukte neobrutalistische letters.
Laadindicator
Een geanimeerde laadindicator voor lopende verzendingen, opvragingen en inline ‘bezet’-statussen — een pictogram dat je zo in elk neobrutalistisch besturingselement kunt plaatsen.
Label
Een bijschrift voor invoervelden, selectievakjes, schakelaars en keuzeknopgroepen — klikken activeert het besturingselement, weergegeven in het neobrutalistische lettertype van de koptekst.
Lade
Een gebarenbestuurd venster dat vanaf elke rand naar binnen schuift voor mobiele menu’s, filters en snelle formulieren — met neobrutalistische randen en schaduwen.
Leeg
Een plaatshouder voor zoekopdrachten zonder resultaten, lege dashboards en startschermen — pictogram, titel en actie omlijst door neobrutalistische randen.
Melding
Een inline-toelichting voor fouten in het formulier, waarschuwingen en bevestigingen van succes — panelen in de kleur van de status, met neobrutalistische randen en harde schaduwen.
Menubalk
Een horizontale balk met vervolgkeuzemenu’s voor werkbalken, editors en dashboards in app-stijl — met die neobrutalistische stijl van randen en schaduwen.
Native select
De standaard HTML-select-elementen in een nieuw jasje voor formulieren, filters en landkeuzemenu’s — een door het besturingssysteem weergegeven dropdown met neobrutalistische randen en schaduwen.
Navigatiemenu
Een horizontale balk met links en uitklapmenu’s voor kopteksten op websites, navigatiemenu’s in documenten en app-shells — met neobrutalistische randen en scherpe schaduwen.
Opdracht
Een via het toetsenbord te bedienen opdrachtpalet voor ⌘K-menu’s, globaal zoeken en snelle acties — met die neobrutalistische stijl van randen en schaduwen.
OTP-invoer
Veldjes voor het invoeren van een eenmalige code voor 2FA, inlogverificatie en pincodes — velden waarin je tekst kunt plakken, met neobrutalistische randen en scherpe schaduwen.
Paginering
Gegenummerde paginalinks met knoppen voor ‘vorige’ en ‘volgende’ bij zoekresultaten, tabellen en archieven — in de neobrutalistische stijl met randen en schaduwen.
Popover
Een zwevend paneel dat is gekoppeld aan een trigger voor datumkiezers, filters en inline-formulieren — met die neobrutalistische stijl van randen en schaduwen.
Richting
Een contextprovider die componenten omzet tussen LTR en RTL, zodat menu’s, schuifbalken en tabbladen correct worden weergegeven in het Arabisch, Hebreeuws en Perzisch.
Schakel
Een aan/uit-knop met twee standen voor de opmaak van de werkbalk, de dempfunctie en de vastzetopties — met die neobrutalistische stijl van randen en schaduwen.
Schakelaar
Een aan/uit-schakelaar voor snelle instellingen — meldingen, donkere modus, feature flags — met die neobrutalistische stijl van randen en schaduwen.
Schakelgroep
Knopgroepen met twee statussen voor werkbalken in de editor, weergaveschakelaars en filterbalken — met die neobrutalistische stijl van randen en schaduwen.
Scheiding
Een horizontale of verticale lijn die menu’s, werkbalken en lijsten van elkaar scheidt — getekend in dezelfde effen randkleur als de neobrutalistische kaders.
Schuifregelaar
Een versleepbaar invoerveld om een waarde of bereik te kiezen — volume, prijsfilters, instellingen — met die neobrutalistische stijl van randen en schaduwen.
Scrollgebied
Een scrollbare container met aangepaste, browseronafhankelijke schuifbalken voor chatvensters, zijbalken en bestandsboomstructuren — met een stevige, neobrutalistische schuifknop.
Selectie
Een dropdownmenu om één optie te kiezen — landenvelden, sorteervolgordes, thema-instellingen — met dikke neobrutalistische randen en scherpe schaduwen.
Selectievakje
Een schakelaar voor toestemmingsvakjes, filters waarmee je meerdere opties kunt selecteren en het selecteren van meerdere rijen tegelijk — met die neobrutalistische stijl van randen en schaduwen.
Skelet
Een knipperend plaatshouderblok voor kaarten, avatars en tabellen terwijl de gegevens worden geladen — met die neobrutalistische dikke randen.
Sonner
Gestapelde toastmeldingen voor opslagbevestigingen, uploads en vensters om handelingen ongedaan te maken — met die neobrutalistische stijl van randen en schaduwen.
Tabbladen
Schakel tussen gelaagde inhoudspanelen — instellingenpagina’s, dashboards en codevoorbeelden — met de neobrutalistische stijl van randen en schaduwen.
Tabel
Een semantische HTML-tabel voor facturen, administratieve lijsten en prijslijsten — rijen met randen, vetgedrukte kopteksten en een strakke, neobrutalistische schaduw.
Tekstgebied
Een tekstveld voor meerdere regels, voor reacties, biografieën en ondersteuningsberichten — met die neobrutalistische stijl van randen en schaduwen.
Toets
Toetsenkapjes voor sneltoetsaanwijzingen in menu’s, tooltips en opdrachtpaletten — een native kbd-element met neobrutalistische randen en schaduwen.
Tooltip
Hover- en focus-hints voor pictogramknoppen, sneltoetsen en afgekorte labels — met de neobrutalistische rand-en-schaduwstijl.
Typografie
Praktische sjablonen voor koppen, hoofdtekst, lijstjes, tabellen en inline-code — opgemaakt in de zware, neobrutalistische stijl.
Veld
Label-, invoer-, help- en foutvelden voor instellingenpanelen, afrekenformulieren en aanmeldingsprocessen — in de neobrutalistische vormgeving.
Voortgang
Een smalle balk die volloopt zodra een taak is voltooid — uploads, installaties, een onboarding in meerdere stappen — met die neobrutalistische stijl van randen en schaduwen.
Waarschuwingsdialoog
Een modaalvenster dat de werkstroom onderbreekt bij acties die gegevens verwijderen — verwijderen, uitloggen, annuleren — met de neobrutalistische stijl van randen en schaduwen.
Zijbalk
Een inklapbaar navigatiepaneel in app-stijl voor dashboards, documenten en beheertools — met die neobrutalistische stijl van randen en schaduwen.
Zijpaneel
Een paneel dat vanaf de rand van het scherm naar binnen schuift voor navigatiemenu’s, filters en bewerkingsformulieren — met die neobrutalistische stijl van randen en schaduwen.
Geliefd bij developers, designers
& makers
Ik stuitte op je UI-kit en pakte hem meteen. Onder de indruk: nieuw, actief onderhouden en constant verbeterd. Geweldig werk! 🤘
Ziv Reich, Softwareontwikkelaar Ik wilde even zeggen: geweldig werk aan neobrutalism.com. Ik vind het echt top. Ik ben waardeloos in design, dus dit was perfect. Ik heb het op mijn persoonlijke site gebruikt.
Paul Bratslavsky, Maker van Coding With Paul Eindelijk mijn persoonlijke website opnieuw gebouwd met Neobrutalism.com — leuke bibliotheek, super makkelijk om te starten!
Cameron Blackwood, Contentmaker Neobrutalism.com is een van mijn favoriete UI-componentbibliotheken in retrostijl — componenten die echt shippen.
Zhengyang Hou, Indie hacker een van mijn favoriete ui-bibliotheken voor het web. mooi werk — hoop dat het groots wordt.
Taseen Tanvir, Oprichter & designer Net Neobrutalism.com Pro geprobeerd — een UI-kit die niet op al het andere lijkt. De neobrutalistische blokken 🔥 maakten rare, speelse layouts sneller prototypen.
Nitesh Padghan, Ghostwriter Prachtig landingpage-ontwerp met perfecte balans en flow. Het kleurenpalet gecombineerd met de animaties levert een uitzonderlijke gebruikerservaring op.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Ik ben echt onder de indruk van het ontwerp dat ze hebben opgeleverd. Het eindproduct kwam precies overeen met wat ik voor ogen had.
Desmond, Medeoprichter @ VectorlabsVentures Als agency-eigenaar besteed ik meestal weken aan het perfectioneren van landingpage-layouts voor klanten. Met Neobrutalism.com plug ik een template in, pas de copy aan, en ik ben klaar om te shippen.
Duke Opoku Amankwah, Oprichter @ Midas De templates zijn niet alleen visueel indrukwekkend, maar ook ongelooflijk goed gestructureerd. Ze hebben ons weken ontwikkeltijd bespaard.
Abiola Braimah, Developer @ Studio IX Uitstekende kwaliteit en oog voor detail. Het responsive design werkt feilloos op alle apparaten.
Acromond X., Medeoprichter @ VectorlabsVentures Deze templates in onze workflow integreren heeft onze ontwikkelcyclus sterk verkort. Uitstekend werk.
Raquib S., Backend-ontwikkelaar Deze templates zijn onze go-to-resource geworden. De code is schoon, goed gedocumenteerd en makkelijk aan te passen.
Hallic M., Developer @ AtlasLabs Neobrutalism.com-templates raken de perfecte balans tussen esthetiek en functionaliteit. Een echte game-changer voor onze projecten.
Ibrahim S., Frontend Lead @ ScaleUp Uitstekende support en premium templates. De ROI van deze templates is fenomenaal.
Kevin K., CEO @ WebCraft Neobrutalism.com-templates hebben compleet veranderd hoe we nieuwe klantprojecten aanpakken. De codekwaliteit is uitzonderlijk en de designs zijn echt world-class.
Danny G., Oprichter van DevStack Ik heb veel templatebibliotheken gebruikt, maar Neobrutalism.com valt op door aandacht voor performance-optimalisatie en schone code-architectuur.
Ian D., CTO bij Wavelength De animaties en micro-interacties in deze templates zijn absoluut verbluffend. Beste investering voor ons designteam.
Ben S., Lead Designer bij PixelPerfect Als niet-technische oprichter hielpen Neobrutalism.com-templates ons om onze MVP in recordtijd te lanceren zonder in te leveren op designkwaliteit. Onze investeerders waren onder de indruk.
Matthew I., Startup-oprichter Ik waardeer hoe modulair en goed gedocumenteerd deze componenten zijn. We konden stukken van verschillende templates naadloos mixen.
Garrett P., Frontend Lead bij TechFusion De ROI van Neobrutalism.com-templates is ongelooflijk. We hebben de ontwikkeltijd drastisch verkort en leveren tegelijk betere sites aan onze klanten.
Xavier C., Agency-eigenaar
Onderdeel
galerij FAQ
Dit overzicht van gratis basiselementen — backends op elke documentatiepagina, CLI install, en hoe de galerij is gekoppeld aan /docs /components.