NeobrutalistischReact UI componenten
Toegankelijke React-componenten in neobrutalistische stijl — dikke randen, harde schaduwen, luide kleuren. Elk komt in een Radix UI- en een Base UI-variant, installeert met de shadcn-CLI en wordt geleverd als code die van jou is.
- 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.