---
name: "@boldkit"
slug: "boldkit"
description: "Free, open-source neubrutalism UI library supporting both React and Vue 3/Nuxt, installable via the shadcn CLI. Contains 56+ components, 15 section blocks, 7 full-page templates, 64 SVG shapes, and 14 chart types. Distinctive aesthetic: thick borders, hard shadows, and bold accent colors. Built on shadcn/ui (Radix UI) and shadcn-vue (Reka UI), Tailwind CSS v4, TypeScript. Use for: projects requiring a bold neubrutalism visual identity across both React and Vue stacks without switching libraries."
category: "Component library (general)"
tags: ["aesthetic", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "components", "dashboard", "design-system", "forms", "hooks", "loaders", "maps", "media", "mobile", "navigation", "onboarding", "overlays", "pro-available", "tables", "theming"]
framework: "vue"
license: "MIT"
author: "ANIBIT14"
website: "https://boldkit.dev"
github: "https://github.com/ANIBIT14/boldkit"
registry: "https://boldkit.dev/r/registry.json"
pro: true
pro_url: "https://boldkit.dev/pricing"
github_stars: 81
component_count: 94
generated_at: "2026-07-28T08:00:50.948Z"
---

# @boldkit

Free, open-source neubrutalism UI library supporting both React and Vue 3/Nuxt, installable via the shadcn CLI. Contains 56+ components, 15 section blocks, 7 full-page templates, 64 SVG shapes, and 14 chart types. Distinctive aesthetic: thick borders, hard shadows, and bold accent colors. Built on shadcn/ui (Radix UI) and shadcn-vue (Reka UI), Tailwind CSS v4, TypeScript. Use for: projects requiring a bold neubrutalism visual identity across both React and Vue stacks without switching libraries.

## Links

- Website: https://boldkit.dev
- GitHub: https://github.com/ANIBIT14/boldkit
- Registry JSON: https://boldkit.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/boldkit
- This file: https://sh4dcn.vercel.app/md/boldkit.md
- Pro / pricing: https://boldkit.dev/pricing

## Install

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

## Components (94)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | BoldKit neubrutalism theme with bold colors and CSS variables | `npx shadcn@latest add https://boldkit.dev/r/theme.json` |
| utils | registry:lib | Utility functions for className merging | `npx shadcn@latest add https://boldkit.dev/r/utils.json` |
| use-theme | registry:hook | Theme provider hook with light/dark/system support and localStorage persistence. Used by Sonner toast for theme-aware rendering. | `npx shadcn@latest add https://boldkit.dev/r/use-theme.json` |
| error-boundary | registry:component | Error boundary wrapper with neubrutalism-styled fallback UI. Used by math-curve components to catch runtime errors gracefully. | `npx shadcn@latest add https://boldkit.dev/r/error-boundary.json` |
| accordion | registry:ui | A vertically stacked set of interactive headings with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/accordion.json` |
| alert | registry:ui | Displays a callout for user attention with bold neubrutalism borders | `npx shadcn@latest add https://boldkit.dev/r/alert.json` |
| aspect-ratio | registry:ui | Displays content within a desired ratio | `npx shadcn@latest add https://boldkit.dev/r/aspect-ratio.json` |
| avatar | registry:ui | An image element with a fallback for representing the user | `npx shadcn@latest add https://boldkit.dev/r/avatar.json` |
| badge | registry:ui | Displays a badge or a component that looks like a badge with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/badge.json` |
| breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links | `npx shadcn@latest add https://boldkit.dev/r/breadcrumb.json` |
| button | registry:ui | Displays a button with neubrutalism styling and press-down animation | `npx shadcn@latest add https://boldkit.dev/r/button.json` |
| card | registry:ui | Displays a card with header, content, and footer with thick borders and shadows | `npx shadcn@latest add https://boldkit.dev/r/card.json` |
| checkbox | registry:ui | A control that allows the user to toggle between checked and not checked | `npx shadcn@latest add https://boldkit.dev/r/checkbox.json` |
| collapsible | registry:ui | An interactive component which expands/collapses a panel | `npx shadcn@latest add https://boldkit.dev/r/collapsible.json` |
| combobox | registry:ui | Searchable dropdown built by composing Popover and Command with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/combobox.json` |
| command | registry:ui | Fast, composable, command menu for React with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/command.json` |
| dialog | registry:ui | A window overlaid on the primary window with neubrutalism borders and shadows | `npx shadcn@latest add https://boldkit.dev/r/dialog.json` |
| dropdown-menu | registry:ui | Displays a menu of actions/options with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/dropdown-menu.json` |
| context-menu | registry:ui | Displays a menu triggered by right-click with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/context-menu.json` |
| menubar | registry:ui | A horizontal menu bar of desktop-style dropdown menus with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/menubar.json` |
| navigation-menu | registry:ui | A collection of links and dropdown panels for site navigation with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/navigation-menu.json` |
| resizable | registry:ui | Resizable panel groups and handles with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/resizable.json` |
| button-group | registry:ui | Visually joins a row or column of buttons into one bordered unit | `npx shadcn@latest add https://boldkit.dev/r/button-group.json` |
| input-group | registry:ui | An input joined with leading/trailing addons in a single bordered field | `npx shadcn@latest add https://boldkit.dev/r/input-group.json` |
| field | registry:ui | Form field composition: label, control, description and error | `npx shadcn@latest add https://boldkit.dev/r/field.json` |
| native-select | registry:ui | A styled wrapper around the native select element, a11y-first | `npx shadcn@latest add https://boldkit.dev/r/native-select.json` |
| date-picker | registry:ui | A single-date picker: a button trigger that opens a calendar popover | `npx shadcn@latest add https://boldkit.dev/r/date-picker.json` |
| input | registry:ui | Displays a form input field with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/input.json` |
| label | registry:ui | Renders an accessible label for form controls | `npx shadcn@latest add https://boldkit.dev/r/label.json` |
| popover | registry:ui | Displays rich content in a portal with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/popover.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task | `npx shadcn@latest add https://boldkit.dev/r/progress.json` |
| radio-group | registry:ui | A set of checkable buttons where only one can be checked at a time | `npx shadcn@latest add https://boldkit.dev/r/radio-group.json` |
| scroll-area | registry:ui | Augments native scroll functionality for custom styling | `npx shadcn@latest add https://boldkit.dev/r/scroll-area.json` |
| select | registry:ui | Displays a list of options with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/select.json` |
| separator | registry:ui | Visually separates content with a thick border | `npx shadcn@latest add https://boldkit.dev/r/separator.json` |
| sheet | registry:ui | Extends Dialog to display content that complements the main page | `npx shadcn@latest add https://boldkit.dev/r/sheet.json` |
| skeleton | registry:ui | Used to show a placeholder while content is loading | `npx shadcn@latest add https://boldkit.dev/r/skeleton.json` |
| slider | registry:ui | A jelly slider with spring physics and bouncy animations | `npx shadcn@latest add https://boldkit.dev/r/slider.json` |
| sonner | registry:ui | An opinionated toast component with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/sonner.json` |
| switch | registry:ui | A control that allows the user to toggle between on and off | `npx shadcn@latest add https://boldkit.dev/r/switch.json` |
| table | registry:ui | A responsive table component with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/table.json` |
| tabs | registry:ui | A tabbed interface component with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/tabs.json` |
| textarea | registry:ui | Displays a form textarea with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/textarea.json` |
| toggle | registry:ui | A two-state button that can be either on or off | `npx shadcn@latest add https://boldkit.dev/r/toggle.json` |
| toggle-group | registry:ui | A group of toggle buttons where only one can be pressed at a time | `npx shadcn@latest add https://boldkit.dev/r/toggle-group.json` |
| tooltip | registry:ui | A popup that displays information related to an element | `npx shadcn@latest add https://boldkit.dev/r/tooltip.json` |
| alert-dialog | registry:ui | A modal dialog for important confirmations with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/alert-dialog.json` |
| calendar | registry:ui | A date picker calendar with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/calendar.json` |
| drawer | registry:ui | A drawer component that slides in from the edge of the screen | `npx shadcn@latest add https://boldkit.dev/r/drawer.json` |
| hover-card | registry:ui | A card that appears on hover with additional information | `npx shadcn@latest add https://boldkit.dev/r/hover-card.json` |
| input-otp | registry:ui | One-time password input with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/input-otp.json` |
| pagination | registry:ui | Pagination controls for navigating through pages | `npx shadcn@latest add https://boldkit.dev/r/pagination.json` |
| chart | registry:ui | Beautiful charts with neubrutalism styling built on Recharts | `npx shadcn@latest add https://boldkit.dev/r/chart.json` |
| marquee | registry:ui | Auto-scrolling text ticker with neubrutalism styling - a common brutalist design element | `npx shadcn@latest add https://boldkit.dev/r/marquee.json` |
| sticker | registry:ui | Rotated labels and stamps with tape effect and double borders - neubrutalist decorative elements | `npx shadcn@latest add https://boldkit.dev/r/sticker.json` |
| layered-card | registry:ui | Card component with stacked layers effect showing offset depth - neubrutalist depth illusion | `npx shadcn@latest add https://boldkit.dev/r/layered-card.json` |
| shapes | registry:ui | 55 neubrutalist SVG shapes organized by category for badges, decorations, and visual accents | `npx shadcn@latest add https://boldkit.dev/r/shapes.json` |
| styles | registry:style | BoldKit neubrutalism CSS variables and utilities | `npx shadcn@latest add https://boldkit.dev/r/styles.json` |
| spinner | registry:ui | Loading spinner with multiple animation variants - dots, bars, blocks, and brutal shadow spin | `npx shadcn@latest add https://boldkit.dev/r/spinner.json` |
| kbd | registry:ui | Keyboard key indicator for displaying shortcuts and hotkeys with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/kbd.json` |
| stat-card | registry:ui | Statistics card with trend indicators, icons, and optional progress bars | `npx shadcn@latest add https://boldkit.dev/r/stat-card.json` |
| stepper | registry:ui | Multi-step form wizard with progress indicators, compound components pattern | `npx shadcn@latest add https://boldkit.dev/r/stepper.json` |
| multi-step-form | registry:ui | Dependency-free multi-step form state layer with per-step validation, designed to compose with Stepper | `npx shadcn@latest add https://boldkit.dev/r/multi-step-form.json` |
| dropzone | registry:ui | Drag-and-drop file upload with validation, progress tracking, and file list | `npx shadcn@latest add https://boldkit.dev/r/dropzone.json` |
| sparkline | registry:ui | Tiny inline trend charts for tables and stat cards - line, area, and bar variants | `npx shadcn@latest add https://boldkit.dev/r/sparkline.json` |
| donut-chart | registry:ui | Pie chart with center hole for KPI display, supports center content slot | `npx shadcn@latest add https://boldkit.dev/r/donut-chart.json` |
| radial-bar-chart | registry:ui | Circular progress bars with nested rings for multiple metrics | `npx shadcn@latest add https://boldkit.dev/r/radial-bar-chart.json` |
| radar-chart | registry:ui | Multi-variable comparison chart for skills, metrics, and feature comparisons | `npx shadcn@latest add https://boldkit.dev/r/radar-chart.json` |
| gauge-chart | registry:ui | Speedometer-style gauge with color zones and animated needle - custom SVG implementation | `npx shadcn@latest add https://boldkit.dev/r/gauge-chart.json` |
| funnel-chart | registry:ui | Funnel chart for conversion flows and pipeline stages with neubrutalism styling | `npx shadcn@latest add https://boldkit.dev/r/funnel-chart.json` |
| treemap-chart | registry:ui | Treemap for hierarchical data visualization with proportional rectangles | `npx shadcn@latest add https://boldkit.dev/r/treemap-chart.json` |
| heatmap-chart | registry:ui | Heatmap grid for correlation and intensity data - custom CSS Grid implementation | `npx shadcn@latest add https://boldkit.dev/r/heatmap-chart.json` |
| sankey-chart | registry:ui | Sankey flow diagram for showing proportional flows between nodes - custom SVG implementation | `npx shadcn@latest add https://boldkit.dev/r/sankey-chart.json` |
| rating | registry:ui | Star rating component with half-values, multiple icons, and keyboard navigation | `npx shadcn@latest add https://boldkit.dev/r/rating.json` |
| tag-input | registry:ui | Multi-tag input with suggestions, validation, and keyboard support | `npx shadcn@latest add https://boldkit.dev/r/tag-input.json` |
| time-picker | registry:ui | Popover-based time picker with 12h/24h format and scrollable columns | `npx shadcn@latest add https://boldkit.dev/r/time-picker.json` |
| date-range-picker | registry:ui | Date range picker with presets, dual calendars, and customizable options | `npx shadcn@latest add https://boldkit.dev/r/date-range-picker.json` |
| data-table | registry:ui | Powerful data table with sorting, filtering, pagination, and row selection | `npx shadcn@latest add https://boldkit.dev/r/data-table.json` |
| carousel | registry:ui | Carousel component with navigation, dots, and touch support built on Embla | `npx shadcn@latest add https://boldkit.dev/r/carousel.json` |
| timeline | registry:ui | Composable timeline for activity feeds, order tracking, and version history | `npx shadcn@latest add https://boldkit.dev/r/timeline.json` |
| tree-view | registry:ui | Hierarchical tree view with expand/collapse, selection, and checkboxes | `npx shadcn@latest add https://boldkit.dev/r/tree-view.json` |
| sidebar | registry:ui | Collapsible sidebar with mobile drawer, tooltips, and keyboard shortcut | `npx shadcn@latest add https://boldkit.dev/r/sidebar.json` |
| tour | registry:ui | Step-by-step product tour with spotlight highlighting and progress indicators | `npx shadcn@latest add https://boldkit.dev/r/tour.json` |
| empty-state | registry:ui | Empty state component with icon, title, description, and optional actions | `npx shadcn@latest add https://boldkit.dev/r/empty-state.json` |
| math-curves | registry:lib | Framework-agnostic math engine for parametric curve animations (rose, lissajous, butterfly, hypotrochoid, cardioid, lemniscate, fourier, spiral, heart) | `npx shadcn@latest add https://boldkit.dev/r/math-curves.json` |
| math-curve-loader | registry:ui | Animated mathematical curve loader with neubrutalism aesthetics — 8 curve variants including rose, lissajous, butterfly, and more | `npx shadcn@latest add https://boldkit.dev/r/math-curve-loader.json` |
| math-curve-progress | registry:ui | Progress indicator that traces a mathematical curve — value-driven head moves along the curve path from 0 to 100% | `npx shadcn@latest add https://boldkit.dev/r/math-curve-progress.json` |
| math-curve-background | registry:ui | Ambient animated mathematical curve background layer with neubrutalism aesthetics — wraps content with a slow-moving curve animation | `npx shadcn@latest add https://boldkit.dev/r/math-curve-background.json` |
| ascii-shapes | registry:ui | 7 animated ASCII art components (Spiral, Rose, Wave, Vortex, Pulse, Matrix, Grid) with 5 character sets, 4 sizes, and SSR-safe static mode | `npx shadcn@latest add https://boldkit.dev/r/ascii-shapes.json` |
| motion | registry:style | BoldKit Motion System — framework-agnostic CSS tokens, keyframes, and six signature recipes (press, stamp-in, shake, reveal, slide-hard, pulse-shadow). Mobile-… | `npx shadcn@latest add https://boldkit.dev/r/motion.json` |
| motion-core | registry:lib | BoldKit Motion core — framework-agnostic, SSR-safe primitives (observeReveal, staggerChildren, triggerAnimation, startViewTransition, prefersReducedMotion) sha… | `npx shadcn@latest add https://boldkit.dev/r/motion-core.json` |
| motion-react | registry:ui | BoldKit Motion React adapter — <Motion>/<Reveal>/<Stagger> components plus useShake and useViewTransition hooks over a framework-agnostic core. | `npx shadcn@latest add https://boldkit.dev/r/motion-react.json` |
| chart-export | registry:lib | BoldKit chart export helpers — framework-agnostic, SSR-safe CSV / PNG / SVG download and fullscreen toggle. Works with any chart engine that renders an <svg> (… | `npx shadcn@latest add https://boldkit.dev/r/chart-export.json` |
| chart-toolbar | registry:ui | Brutalist chart toolbar overlay — export the wrapped chart as PNG or SVG, download its data as CSV, and toggle fullscreen. | `npx shadcn@latest add https://boldkit.dev/r/chart-toolbar.json` |

## For AI agents

```text
You are adding components from @boldkit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/boldkit.md) for the component list.
2. Fetch the machine-readable index: https://boldkit.dev/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: boldkit).
```