---
name: "@neobrutal-ui"
slug: "neobrutal-ui"
description: "Neobrutalist React UI with staged press feedback, shared themes, and editable Next.js page templates, built with Base UI."
category: "Animated components"
tags: ["animation", "auth", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "forms", "loaders", "maps", "media", "navigation", "overlays", "retro", "tables", "theming"]
framework: "react"
license: "MIT"
author: "andongmin94"
website: "https://neobrutal-ui.andongmin.com"
github: "https://github.com/andongmin94/neobrutal-ui"
registry: "https://neobrutal-ui.andongmin.com/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 81
generated_at: "2026-10-10T06:32:55.998Z"
---

# @neobrutal-ui

Neobrutalist React UI with staged press feedback, shared themes, and editable Next.js page templates, built with Base UI.

## Links

- Website: https://neobrutal-ui.andongmin.com
- GitHub: https://github.com/andongmin94/neobrutal-ui
- Registry JSON: https://neobrutal-ui.andongmin.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/neobrutal-ui
- This file: https://sh4dcn.vercel.app/md/neobrutal-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/registry.json
pnpm dlx shadcn@latest add https://neobrutal-ui.andongmin.com/r/registry.json
bunx shadcn@latest add https://neobrutal-ui.andongmin.com/r/registry.json
# clone the source repo
git clone https://github.com/andongmin94/neobrutal-ui.git
# fetch the raw registry index
curl -s https://neobrutal-ui.andongmin.com/r/registry.json
```

## Components (81)

| name | type | description | install |
| --- | --- | --- | --- |
| neobrutal-ui | registry:base | Base UI powered neobrutalist design-system base. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/neobrutal-ui.json` |
| accordion | registry:ui | A vertically stacked set of collapsible content sections. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/accordion.json` |
| alert | registry:ui | A prominent message for status updates, notices, and warnings. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/alert.json` |
| alert-dialog | registry:ui | A modal confirmation dialog for important or destructive actions. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/alert-dialog.json` |
| avatar | registry:ui | An image or fallback that identifies a person or entity. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/avatar.json` |
| badge | registry:ui | A compact label for statuses, categories, and metadata. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/badge.json` |
| breadcrumb | registry:ui | A navigation trail that shows the current page hierarchy. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/breadcrumb.json` |
| button | registry:ui | An interactive control that triggers an action or navigation. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/button.json` |
| calendar | registry:ui | A date picker calendar with single and range selection support. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/calendar.json` |
| card | registry:ui | A bordered container for grouping related content and actions. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/card.json` |
| carousel | registry:ui | A scrollable collection of content with previous and next controls. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/carousel.json` |
| chart | registry:ui | Composable Recharts helpers with neobrutalist styling and legends. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart.json` |
| checkbox | registry:ui | A control for toggling one or more independent selections. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/checkbox.json` |
| collapsible | registry:ui | An expandable region that reveals or hides related content. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/collapsible.json` |
| command | registry:ui | A searchable command palette for actions and navigation. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/command.json` |
| context-menu | registry:ui | A contextual action menu opened with a secondary pointer action. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/context-menu.json` |
| dialog | registry:ui | A modal overlay for focused content, forms, and actions. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/dialog.json` |
| drawer | registry:ui | A panel that slides in from the edge of the viewport. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/drawer.json` |
| dropdown-menu | registry:ui | A button-triggered menu for actions, choices, and nested options. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/dropdown-menu.json` |
| form | registry:ui | Accessible form helpers with React Hook Form and Zod validation. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/form.json` |
| hover-card | registry:ui | A preview card that appears when a linked element is hovered. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/hover-card.json` |
| image-card | registry:ui | A neobrutalist card for presenting an image with supporting content. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/image-card.json` |
| input | registry:ui | A styled text field for collecting short-form user input. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/input.json` |
| input-group | registry:ui | A text input composed with buttons, icons, or inline controls. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/input-group.json` |
| input-otp | registry:ui | A segmented input for one-time passwords and verification codes. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/input-otp.json` |
| label | registry:ui | An accessible text label for a form control. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/label.json` |
| marquee | registry:ui | A continuously scrolling row for logos, quotes, or featured content. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/marquee.json` |
| menubar | registry:ui | A horizontal application menu with nested commands and shortcuts. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/menubar.json` |
| navigation-menu | registry:ui | A responsive site navigation menu with expandable link panels. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/navigation-menu.json` |
| pagination | registry:ui | Navigation controls for moving between pages of content. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/pagination.json` |
| popover | registry:ui | A floating panel for contextual content and lightweight controls. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/popover.json` |
| progress | registry:ui | A visual indicator of task or process completion. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/progress.json` |
| radio-group | registry:ui | A set of mutually exclusive options for selecting one value. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/radio-group.json` |
| resizable | registry:ui | Adjustable panel groups with draggable resize handles. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/resizable.json` |
| scroll-area | registry:ui | A custom scrollable viewport with styled scrollbars. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/scroll-area.json` |
| select | registry:ui | A dropdown control for choosing one value from a list. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/select.json` |
| separator | registry:ui | A visual divider for separating related content groups. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/separator.json` |
| sheet | registry:ui | A modal panel that enters from a configurable screen edge. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/sheet.json` |
| sidebar | registry:ui | A responsive, collapsible application sidebar with navigation primitives. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/sidebar.json` |
| skeleton | registry:ui | A placeholder that communicates content is loading. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/skeleton.json` |
| slider | registry:ui | A draggable control for selecting a value or range. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/slider.json` |
| sonner | registry:ui | A toast notification provider styled for neobrutalist interfaces. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/sonner.json` |
| switch | registry:ui | A binary control for turning a setting on or off. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/switch.json` |
| table | registry:ui | Semantic table primitives for structured rows and columns. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/table.json` |
| tabs | registry:ui | A tabbed interface for switching between related content panels. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/tabs.json` |
| textarea | registry:ui | A multiline text field for collecting longer user input. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/textarea.json` |
| tooltip | registry:ui | A concise text hint shown when an element is hovered or focused. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/tooltip.json` |
| data-table | registry:block | A sortable, filterable data table recipe built with TanStack Table. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/data-table.json` |
| chart-revenue-target | registry:component | Weekly revenue with period controls, target variance, and an exact data table. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-revenue-target.json` |
| chart-signup-conversion | registry:component | Cohort conversion with stage losses, conversion rates, and an exact data table. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-signup-conversion.json` |
| chart-service-latency | registry:component | Daily p50 and p95 with service controls, budget breaches, and an exact data table. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-service-latency.json` |
| chart-release-activity | registry:component | Install and update activity with count/share views, period controls, and exact values. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-release-activity.json` |
| chart-delivery-capacity | registry:component | Planned and delivered work with team controls, signed variance, and exact values. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-delivery-capacity.json` |
| chart-build-duration | registry:component | Paired cold and cached builds with series controls, time savings, and a budget. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-build-duration.json` |
| chart-work-allocation | registry:component | Planned hours with period controls, a workstream inspector, and part-to-whole values. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-work-allocation.json` |
| chart-install-diagnostics | registry:component | Sequential install stages with environment controls, duration units, and stage shares. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/chart-install-diagnostics.json` |
| blog-template | registry:block | An editorial archive with topic filters, search, sorting, and reading pages. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/blog-template.json` |
| portfolio-template | registry:block | A design practice with services, expandable case studies, and a project inquiry. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/portfolio-template.json` |
| cms-template | registry:block | An editorial workspace with content preview, local save, and change recovery. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/cms-template.json` |
| link-hub-template | registry:block | A creator profile with categorized destinations and a copyable contact address. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/link-hub-template.json` |
| dashboard-template | registry:block | A project overview with task search, status filters, and progress summaries. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/dashboard-template.json` |
| landing-template | registry:block | A product landing page with feature sections, billing options, and plan selection. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/landing-template.json` |
| theme-mono | registry:style | The mono light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-mono.json` |
| theme-mono-warm | registry:style | The mono-warm light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-mono-warm.json` |
| theme-red | registry:style | The red light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-red.json` |
| theme-orange | registry:style | The orange light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-orange.json` |
| theme-amber | registry:style | The amber light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-amber.json` |
| theme-yellow | registry:style | The yellow light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-yellow.json` |
| theme-lime | registry:style | The lime light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-lime.json` |
| theme-green | registry:style | The green light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-green.json` |
| theme-emerald | registry:style | The emerald light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-emerald.json` |
| theme-teal | registry:style | The teal light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-teal.json` |
| theme-cyan | registry:style | The cyan light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-cyan.json` |
| theme-sky | registry:style | The sky light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-sky.json` |
| theme-blue | registry:style | The blue light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-blue.json` |
| theme-indigo | registry:style | The indigo light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-indigo.json` |
| theme-violet | registry:style | The violet light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-violet.json` |
| theme-purple | registry:style | The purple light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-purple.json` |
| theme-fuchsia | registry:style | The fuchsia light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-fuchsia.json` |
| theme-pink | registry:style | The pink light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-pink.json` |
| theme-rose | registry:style | The rose light and dark theme for neobrutal-ui. | `npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-rose.json` |

## For AI agents

```text
You are adding components from @neobrutal-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/neobrutal-ui.md) for the component list.
2. Fetch the machine-readable index: https://neobrutal-ui.andongmin.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: neobrutal-ui).
```