BoldKit

Bold. Raw. Beautiful.

A neubrutalism component library for React and Vue 3, built on shadcn/ui.

Website · Documentation · Components · Charts · Shapes

What's New in v3.3.0

🧱 15 Full-Page Blocks — Production-ready page sections for React & Vue 3

10 Marketing Blocks:

Hero Section — Bold headline, subtext, CTA button, and optional image/shapes
Feature Grid — 3- and 4-column grids with icons and descriptions
Testimonials — Cards, carousel, and single-quote layouts with avatars
Logo Cloud — Client/partner logo strip with optional marquee scroll
CTA Section — Newsletter signup, trial signup, and contact variants
Stats Section — Big number KPIs with labels and neubrutalism accents
Team Section — Member cards with role, bio, and social links
FAQ Section — Accordion-based Q&A with expand/collapse animation
Footer Section — Multi-column layout with newsletter and social links
Contact Section — Contact form with info cards and map placeholder

5 Application Blocks:

Auth Forms — Login, Signup, Forgot Password, OTP verification
Error Pages — 404, 500, and maintenance pages in neubrutalism style
Settings Page — Tabbed settings with Profile, Notifications, and Billing panels
Onboarding Flow — Multi-step setup wizard with progress tracking
Invoice — Printable invoice / receipt layout with line items and totals

All blocks are installable via the shadcn CLI for both React and Vue 3/Nuxt.

🧩 11 New UI Components

Component	Description
Carousel	Image and content slider with prev/next navigation
Combobox	Searchable select with keyboard navigation
Data Table	Sortable, filterable table with column visibility and row selection
Date Range Picker	Calendar-based date range selection
Rating	Star rating input with half-star support
Sidebar	Collapsible navigation sidebar with section groups
Tag Input	Multi-value input with removable tag chips
Time Picker	Hour/minute/second time selection with AM/PM toggle
Timeline	Vertical activity feed and process flow component
Tour	Step-by-step product tour with highlight and popover
Tree View	Nested expandable tree for file explorers and hierarchies

Preview

55+ beautifully crafted neubrutalism components, 10 chart types, 64 SVG shapes, 17 animated ASCII shapes, 23 canvas effects, and 15 math curve animations for React and Vue 3

What is Neubrutalism?

Neubrutalism (or neo-brutalism) is a bold design aesthetic characterized by:

Thick Borders - 3px solid borders that define elements
Hard Shadows - Offset shadows with no blur (4px 4px 0px)
Bold Colors - High-contrast, vibrant color palettes
Raw Typography - Bold, uppercase text for emphasis
Zero Radius - Square corners for that raw, unpolished look

Features

Feature	Description
55+ Components	Buttons, Cards, Dialogs, Forms, Spinners, Steppers, and more
10 Chart Types	Bar, Line, Area, Pie, Donut, Radar, Radial, Gauge, Sparkline
64 SVG Shapes	Decorative shapes (geometric, organic, mathematical, mechanical) with interactive Shape Builder
17 ASCII Shapes	Animated 3D ASCII art — Torus, Donut, Sphere, Cube, Helix, Trefoil Knot, Saturn, DNA, and more
Dot Matrix Studio	In-browser pixel art & animation editor with 10 presets, WebM/PNG/SVG/JSON export
23 Canvas Effects	Animated canvas components — Mesh Gradient, Swirl, God Rays, Pulsing Border, Dither, Halftone, CRT, Truchet, Aurora, Flow Field, Plasma, Metaballs and more. Each pauses off-screen and in background tabs, caps its pixel budget, and honours `prefers-reduced-motion`.
Math Curve Components	Animated loaders, progress bars, and backgrounds powered by 15 mathematical curves
React & Vue 3	Full support for both frameworks
Nuxt Ready	SSR-compatible with shadcn-nuxt module
shadcn CLI	Install via `shadcn` (React) or `shadcn-vue` (Vue/Nuxt)
Accessible	Built on Radix UI (React) & Reka UI (Vue)
Dark Mode	Full light/dark theme support
TypeScript	Complete type safety
Tailwind v4	Modern CSS with latest Tailwind

MCP Server & CLI

Install components from an AI agent or the terminal — both auto-detect React vs Vue:

# MCP (Claude Code, Cursor, VS Code, Windsurf, Codex, Gemini CLI, ...)
claude mcp add boldkit -- npx -y @boldkit/mcp

# CLI
npx boldkit add button card dialog
npx boldkit search "toast"

Full per-client setup: boldkit.dev/docs/mcp

Quick Start

Required first step: register the @boldkit alias in your components.json. BoldKit components reference each other via scoped names like @boldkit/utils, and without the alias the CLI resolves these against shadcn's default registry (which doesn't ship them) and installs fail.

Configure the registry alias

React — add to components.json:

{
  "registries": {
    "@boldkit": "https://boldkit.dev/r/{name}.json"
  }
}

Vue — add to components.json:

{
  "registries": {
    "@boldkit": "https://boldkit.dev/r/vue/{name}.json"
  }
}

React (shadcn CLI)

# Install a component
npx shadcn@latest add @boldkit/button

# Install multiple components
npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/input

# Install shapes
npx shadcn@latest add @boldkit/shapes

# Install the BoldKit theme (CSS variables)
npx shadcn@latest add @boldkit/styles

Vue 3 (shadcn-vue CLI)

# Install a component
npx shadcn-vue@latest add @boldkit/button

# Install multiple components
npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/input

# Install shapes
npx shadcn-vue@latest add @boldkit/shapes

# Install the BoldKit theme (CSS variables)
npx shadcn-vue@latest add @boldkit/styles

Alternative: direct URLs

For one-off installs without configuring the alias, you can pass the registry URL directly. Note: components with cross-references won't auto-install their BoldKit dependencies this way — you'll need to add each dependency manually.

# React
npx shadcn@latest add https://boldkit.dev/r/button.json

# Vue
npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json

Install directly from GitHub (zero config, React)

BoldKit's repository is also a shadcn GitHub registry — install any React component straight from the repo with no components.json alias and no setup. Scoped cross-references like @boldkit/utils resolve automatically (the CLI maps them to this same registry).

# Install a component — owner/repo/item
npx shadcn@latest add ANIBIT14/boldkit/button

# Install multiple
npx shadcn@latest add ANIBIT14/boldkit/button ANIBIT14/boldkit/card

# Pin to a tag, branch, or commit SHA for reproducible installs
npx shadcn@latest add ANIBIT14/boldkit/button#main

# Browse / preview before installing
npx shadcn@latest list ANIBIT14/boldkit
npx shadcn@latest view ANIBIT14/boldkit/button
npx shadcn@latest add ANIBIT14/boldkit/button --dry-run

GitHub install covers the React registry (components, blocks, theme, utils, shapes). Vue 3 / Nuxt and canvas effects install via the hosted URLs above.

Nuxt

# 1. Add shadcn-nuxt module
npx nuxi@latest module add shadcn-nuxt

# 2. Initialize shadcn-vue (select Nuxt when prompted)
npx shadcn-vue@latest init

# 3. Install BoldKit components
npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['shadcn-nuxt'],
  shadcn: {
    prefix: '',
    componentDir: './components/ui'
  }
})

Note: Some components (Drawer, Sonner, Command, Calendar, Chart) require <ClientOnly> wrapper for SSR. See the Nuxt installation guide for details.

Usage

React

import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

export function Example() {
  return (
    <Card>
      <CardHeader className="bg-primary">
        <CardTitle className="flex items-center gap-2">
          Welcome to BoldKit
          <Badge variant="secondary">New</Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <p>Build bold, beautiful interfaces with ease.</p>
        <div className="flex gap-2">
          <Button>Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="accent">Accent</Button>
        </div>
      </CardContent>
    </Card>
  )
}

Vue 3

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Card>
    <CardHeader class="bg-primary">
      <CardTitle class="flex items-center gap-2">
        Welcome to BoldKit
        <Badge variant="secondary">New</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent class="space-y-4">
      <p>Build bold, beautiful interfaces with ease.</p>
      <div class="flex gap-2">
        <Button>Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="accent">Accent</Button>
      </div>
    </CardContent>
  </Card>
</template>

Components

Form Components

Button (7 variants, 5 sizes)
Input
Textarea
Checkbox
Radio Group
Select
Switch
Slider
Label
Input OTP
Dropzone (drag-and-drop file upload) ✨ NEW

Layout & Containers

Card
Layered Card (stacked paper effect)
Stat Card (statistics display) ✨ NEW
Dialog
Drawer
Sheet
Accordion
Collapsible
Tabs
Stepper (multi-step forms/wizards) ✨ NEW
Scroll Area
Aspect Ratio
Separator

Feedback & Status

Alert
Alert Dialog
Badge
Progress
Skeleton
Spinner (5 animation variants) ✨ NEW
Sonner (Toast)
Math Curve Loader (animated loading spinners driven by mathematical curves) ✨ NEW
Math Curve Progress (progress bars rendered as animated mathematical curves) ✨ NEW
Math Curve Background (full-bleed animated curve backgrounds) ✨ NEW

Navigation

Breadcrumb
Dropdown Menu
Command Palette
Pagination
Popover
Tooltip
Hover Card

Data Display

Avatar
Table
Calendar
Kbd (keyboard shortcut hints) ✨ NEW

Charts (10 Types)

Area Chart
Bar Chart
Line Chart
Pie Chart
Donut Chart (pie with center content) ✨ NEW
Radar Chart (multi-variable comparison) ✨ NEW
Radial Bar Chart (circular progress) ✨ NEW
Gauge Chart (speedometer KPI) ✨ NEW
Sparkline (inline trend charts) ✨ NEW

Decorative (Neubrutalism Special)

Sticker (rotated labels)
Marquee (scrolling ticker)
64 SVG Shapes (Geometric, Organic, Celestial, Mathematical, Mechanical, and more) ✨ EXPANDED
17 ASCII Shapes (Torus, Donut, Sphere, Cube, Helix, Trefoil Knot, Geodesic Dome, Saturn, Hyperboloid, DNA, Spiral, Rose, Wave, Vortex…) ✨ NEW
Shape Builder (interactive tool to customize shapes, export SVG/JSX) ✨ NEW

Math Curve Components

15 animated mathematical curves (Lissajous, Hypotrochoid, Epitrochoid, Rose, Spirograph, and more) rendered as interactive UI elements — no external animation library required.

MathCurveLoader

import { MathCurveLoader } from '@/components/ui/math-curve-loader'

<MathCurveLoader curve="lissajous" size="md" speed="normal" />
<MathCurveLoader curve="rose" size="lg" speed="slow" />
<MathCurveLoader curve="spiral" size="xl" speed="fast" />

MathCurveProgress

import { MathCurveProgress } from '@/components/ui/math-curve-progress'

<MathCurveProgress value={65} curve="lissajous" />
<MathCurveProgress value={40} curve="rose" showLabel />

MathCurveBackground

import { MathCurveBackground } from '@/components/ui/math-curve-background'

<MathCurveBackground curve="lissajous" opacity={0.15}>
  <YourPageContent />
</MathCurveBackground>

Shapes

64 decorative SVG shapes across 8 categories for unique neubrutalism layouts:

React

import { BurstShape, HeartShape, LightningShape } from '@/components/ui/shapes'

<BurstShape size={100} className="text-primary" />
<HeartShape size={80} filled={false} strokeWidth={4} />
<LightningShape size={60} className="text-accent" />

Vue 3

<script setup lang="ts">
import { BurstShape, HeartShape, LightningShape } from '@/components/ui/shapes'
</script>

<template>
  <BurstShape :size="100" class="text-primary" />
  <HeartShape :size="80" :filled="false" :stroke-width="4" />
  <LightningShape :size="60" class="text-accent" />
</template>

Shape Builder

The interactive Shape Builder lets you customize any shape's size, color, stroke width, and fill, then export it as SVG or copy it as JSX/Vue template code ready to paste into your project.

ASCII Shapes

17 animated ASCII art components rendered with perspective projection, z-buffering, and Lambertian shading — no canvas, no WebGL, just text characters:

Shape	Description
`AsciiTorus`	3D rotating torus with z-buffering and Lambertian shading
`AsciiDonut`	Classic donut.c doughnut — faithful a1k0n algorithm, hole always visible
`AsciiSphere`	Rotating globe with lat/lon grid texture and Lambertian shading
`AsciiCube`	Solid shaded cube rotating on two axes with back-face culling
`AsciiHelix`	Double helix with two strands and connecting rungs
`AsciiTrefoilKnot`	Trefoil knot tube with Frenet frames, z-buffer, and Lambertian shading
`AsciiGeodesicDome`	Frequency-3 icosahedron wireframe projected onto a sphere
`AsciiSaturn`	Planet with tilted solid ring system and Cassini division gap
`AsciiHyperboloid`	Two families of straight-line rulings on a ruled surface tower
`AsciiDNA`	B-form DNA double helix: 150° strand offset, 4 turns, tube backbone + rungs
`AsciiSpiral`	Archimedean spiral arms rotating continuously
`AsciiRose`	Rose curve r=cos(5θ) blooming and phase-shifting
`AsciiWave`	Multi-frequency sine interference pattern
`AsciiVortex`	Rotating density field collapsing toward center
`AsciiPulse`	Concentric rings expanding outward and fading
`AsciiMatrix`	Characters raining downward per column
`AsciiGrid`	Grid intersections pulsing with traveling waves

React

import { AsciiTorus, AsciiDonut, AsciiSphere } from '@/components/ui/ascii-shapes'

// Basic usage
<AsciiTorus />

// With options
<AsciiDonut
  size="md"          // 'sm' | 'md' | 'lg' | 'hero'
  charset="classic"  // 'blocks' | 'braille' | 'classic' | 'line' | 'dots'
  speed="normal"     // 'slow' | 'normal' | 'fast'
  color="#e74c3c"    // any CSS color string
  animated={true}    // false = static snapshot, SSR-safe
/>

// Multicolor — cycles primary/secondary/accent/warning/info/success per row
<AsciiSphere size="lg" charset="classic" multicolor />

Vue 3 / Nuxt

<script setup lang="ts">
import { AsciiTorus, AsciiDonut } from '@/components/ui/ascii-shapes'
</script>

<template>
  <AsciiDonut size="md" charset="classic" />

  <!-- In Nuxt, wrap animated variants in <ClientOnly> -->
  <ClientOnly>
    <AsciiTorus size="lg" multicolor />
  </ClientOnly>
</template>

Install

# React
npx shadcn@latest add "https://boldkit.dev/r/ascii-shapes.json"

# Vue 3 / Nuxt
npx shadcn-vue@latest add "https://boldkit.dev/r/vue/ascii-shapes.json"

Theming

Customize with CSS variables (works for both React and Vue):

:root {
  --primary: 0 84% 71%;       /* Coral */
  --secondary: 174 62% 56%;   /* Teal */
  --accent: 49 100% 71%;      /* Yellow */
  --destructive: 0 84% 60%;   /* Red */
  --shadow-color: 240 10% 10%;
  --radius: 0rem;             /* Keep it square! */
}

Visit the Theme Builder to create custom themes.

Tech Stack

React

React 19 - Latest React with concurrent features
Radix UI - Accessible primitives
Recharts - Data visualization

Vue 3

Vue 3 - Composition API with <script setup>
Reka UI - Accessible primitives (Radix port for Vue)
vue-echarts - Data visualization

Nuxt

Nuxt - Vue meta-framework with SSR support
shadcn-nuxt - Official Nuxt module for shadcn-vue
Auto-imports - Components auto-imported from components/ui
VueUse - SSR-safe composables

Shared

Tailwind CSS v4 - Modern utility-first CSS
TypeScript - Full type safety
Class Variance Authority - Variant management
Vite - Fast development and builds

Project Structure

boldkit/
├── src/                    # React documentation site
├── packages/
│   └── vue/               # Vue 3 components
│       └── src/
│           └── components/
│               └── ui/    # Vue SFC components
├── public/
│   └── r/                 # Component registry
│       ├── *.json         # React registry
│       └── vue/
│           └── *.json     # Vue registry

Development

# Clone
git clone https://github.com/ANIBIT14/boldkit.git
cd boldkit

# Install
npm install

# Dev server (React docs site)
npm run dev

# Build
npm run build

# Build registry
npm run registry:build

Contributing

We welcome contributions! Please see our Contributing Guide and Code of Conduct.

License

MIT License - free for personal and commercial use.

Built by Aniruddha Agarwal

LinkedIn · GitHub