NeobrutalistReact UI components
Skip bland defaults. Grab neobrutalist React UI components — thick borders, hard shadows, loud color. Install with the shadcn CLI, or pull them in through your AI agent with our MCP server. Works with Radix UI, Base UI, and React Aria. The code is yours.
- 50+ components
- Thick borders, hard shadows
- shadcn CLI install
- Radix · Base UI · React Aria
- Open source
- Accessible by default
- The code is yours
- MCP server support
- Dark mode & RTL
- Loud little labels
All components
Accordion
A vertically stacked set of expandable sections for FAQs, settings, and content-heavy pages — with the neobrutalist borders-and-shadows treatment.
Alert
An inline callout for form errors, warnings, and success confirmations — status-colored panels with neobrutalist borders and hard shadows.
Alert Dialog
A modal that halts the flow for destructive actions — delete, sign out, discard — with the neobrutalist borders-and-shadows treatment.
Aspect Ratio
Constrains images, video embeds, and maps to a fixed ratio as they scale — the layout utility that keeps neobrutalist cards on-grid.
Avatar
A user image with initials fallback for profile menus, comment threads, and team lists — with the neobrutalist thick-border treatment.
Badge
A small label for statuses, counts, and tags on cards, tables, and nav items — with the neobrutalist borders-and-shadows treatment.
Breadcrumb
Shows where the page sits in the site hierarchy — link trails for docs, store categories, and dashboards — in bold neobrutalist type.
Button
A clickable trigger for form submits, toolbars, and destructive confirms — with thick borders and a shadow it presses into on click.
Button Group
Fuses split buttons, toolbars, and input add-ons into one framed unit — one thick border, one hard shadow, one shared press.
Calendar
A month-grid date picker for bookings, scheduling, and range selection — with the neobrutalist borders-and-shadows treatment.
Card
A bordered box for dashboards, pricing tiers, and product grids — header, content, and footer with the neobrutalist hard-shadow treatment.
Carousel
A swipeable slideshow for product galleries, testimonials, and hero sections — dressed in neobrutalist borders and hard shadows.
Checkbox
A binary toggle for consent boxes, multi-select filters, and bulk row selection — with the neobrutalist borders-and-shadows treatment.
Collapsible
A trigger-and-panel pair for file trees, advanced settings, and show-more sections — with the neobrutalist borders-and-shadows treatment.
Combobox
An autocomplete input that filters options as you type — country pickers, tag inputs, long selects — with neobrutalist borders and shadows.
Command
A keyboard-driven command palette for ⌘K menus, global search, and quick actions — with the neobrutalist borders-and-shadows treatment.
Context Menu
A right-click menu for file rows, canvases, and data grids — contextual actions with the neobrutalist borders-and-shadows treatment.
Data Table
Sortable, filterable, paginated tables for admin panels, dashboards, and order lists — with the neobrutalist borders-and-shadows treatment.
Date Picker
A popover calendar for picking single dates, ranges, and birthdays in forms and filters — with neobrutalist borders and hard shadows.
Dialog
A modal window for confirmations, quick forms, and destructive-action prompts — layered over the page with thick borders and a hard shadow.
Direction
A context provider that flips components between LTR and RTL so menus, sliders, and tabs mirror correctly in Arabic, Hebrew, and Persian.
Drawer
A gesture-driven sheet that slides in from any edge for mobile menus, filters, and quick forms — with neobrutalist borders and shadows.
Dropdown Menu
A button-triggered menu for row actions, account switchers, and view options — with the neobrutalist borders-and-shadows treatment.
Empty
A placeholder for no-results searches, blank dashboards, and first-run screens — icon, title, and action framed in neobrutalist borders.
Field
Label, control, help text, and error slots for settings panels, checkout forms, and signup flows — with the neobrutalist form treatment.
Hover Card
A floating preview that opens on hover — profile peeks, link previews, glossary terms — with the neobrutalist borders-and-shadows treatment.
Input
A single-line text field for logins, search bars, and checkout forms — with the neobrutalist thick-border and hard-shadow treatment.
Input Group
Attach icons, buttons, and kbd hints to inputs for search bars, URL fields, and chat composers — with neobrutalist borders and shadows.
Input OTP
One-time code entry for 2FA, sign-in verification, and PIN screens — paste-aware slots with neobrutalist borders and hard shadows.
Item
A flex row with media, title, description, and action slots for notification feeds, settings lists, and file rows — neobrutalist-styled.
Kbd
Keyboard-key caps for shortcut hints in menus, tooltips, and command palettes — a native kbd element with neobrutalist borders and shadows.
Label
A caption for inputs, checkboxes, switches, and radio groups — clicks activate the control, set in the neobrutalist heading font.
Menubar
A horizontal bar of dropdown menus for app-style toolbars, editors, and dashboards — with the neobrutalist borders-and-shadows treatment.
Native Select
The native HTML select restyled for forms, filters, and country pickers — OS-rendered dropdown with neobrutalist borders and shadows.
Navigation Menu
A horizontal bar of links and dropdown panels for site headers, docs navs, and app shells — with neobrutalist borders and hard shadows.
Pagination
Numbered page links with previous/next controls for search results, tables, and archives — in the neobrutalist borders-and-shadows style.
Popover
A floating panel anchored to a trigger for date pickers, filters, and inline forms — with the neobrutalist borders-and-shadows treatment.
Progress
A slim bar that fills as a task completes — uploads, installs, multi-step onboarding — with the neobrutalist borders-and-shadows treatment.
Radio Group
A single-choice set of radio buttons for plans, shipping options, and settings forms — with the neobrutalist borders-and-shadows treatment.
Resizable
Draggable split panes for code editors, file trees, and dashboard layouts — with the neobrutalist borders-and-shadows treatment.
Scroll Area
A scrollable container with custom, cross-browser scrollbars for chat panes, sidebars, and file trees — with a chunky neobrutalist thumb.
Select
A dropdown for picking one option — country fields, sort orders, theme settings — with thick neobrutalist borders and hard shadows.
Separator
A horizontal or vertical rule that divides menus, toolbars, and lists — drawn in the same solid border color as neobrutalist frames.
Sheet
A panel that slides in from the screen edge for nav drawers, filters, and edit forms — with the neobrutalist borders-and-shadows treatment.
Sidebar
A collapsible app-shell navigation panel for dashboards, docs, and admin tools — with the neobrutalist borders-and-shadows treatment.
Skeleton
A pulsing placeholder block for cards, avatars, and tables while data loads — with the neobrutalist thick-border treatment.
Slider
A draggable input for picking a value or range — volume, price filters, settings — with the neobrutalist borders-and-shadows treatment.
Sonner
Stacked toast notifications for save confirmations, uploads, and undo windows — with the neobrutalist borders-and-shadows treatment.
Spinner
An animated loading indicator for pending submits, fetches, and inline busy states — a drop-in icon for any neobrutalist control.
Switch
An on/off toggle for instant settings — notifications, dark mode, feature flags — with the neobrutalist borders-and-shadows treatment.
Table
A semantic HTML table for invoices, admin lists, and pricing grids — bordered rows, bold headers, and a hard neobrutalist shadow.
Tabs
Switch between layered content panels — settings pages, dashboards, and code previews — with the neobrutalist borders-and-shadows treatment.
Textarea
A multi-line text input for comments, bios, and support messages — with the neobrutalist borders-and-shadows treatment.
Toggle
A two-state on/off button for toolbar formatting, mute, and pin controls — with the neobrutalist borders-and-shadows treatment.
Toggle Group
Two-state button groups for editor toolbars, view switchers, and filter bars — with the neobrutalist borders-and-shadows treatment.
Tooltip
Hover and focus hints for icon buttons, keyboard shortcuts, and truncated labels — with the neobrutalist border-and-shadow treatment.
Typography
Utility-class recipes for headings, body copy, lists, tables, and inline code — typeset to the neobrutalist heavy-weight look.