Bold. Raw. Beautiful.
A neubrutalism component library for React and Vue 3, built on shadcn/ui.
Website · Documentation · Components · Charts · Shapes
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.
| 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 |
55+ beautifully crafted neubrutalism components, 10 chart types, 64 SVG shapes, 17 animated ASCII shapes, 10 canvas effects, and 15 math curve animations for React and Vue 3
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
| 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 |
| 10 Canvas Effects | Animated canvas components — Aurora, Flow Field, Plasma, Metaballs, Matrix Rain and more. Zero deps. |
| 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 |
Required first step: register the
@boldkitalias in yourcomponents.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.
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"
}
}# 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# 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/stylesFor 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# 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.jsonnuxt.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.
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>
)
}<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>
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
15 animated mathematical curves (Lissajous, Hypotrochoid, Epitrochoid, Rose, Spirograph, and more) rendered as interactive UI elements — no external animation library required.
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" />import { MathCurveProgress } from '@/components/ui/math-curve-progress'
<MathCurveProgress value={65} curve="lissajous" />
<MathCurveProgress value={40} curve="rose" showLabel />import { MathCurveBackground } from '@/components/ui/math-curve-background'
<MathCurveBackground curve="lissajous" opacity={0.15}>
<YourPageContent />
</MathCurveBackground>64 decorative SVG shapes across 8 categories for unique neubrutalism layouts:
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" /><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>
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.
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 |
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 /><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># 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"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.
- React 19 - Latest React with concurrent features
- Radix UI - Accessible primitives
- Recharts - Data visualization
- Vue 3 - Composition API with
<script setup> - Reka UI - Accessible primitives (Radix port for Vue)
- vue-echarts - Data visualization
- 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
- Tailwind CSS v4 - Modern utility-first CSS
- TypeScript - Full type safety
- Class Variance Authority - Variant management
- Vite - Fast development and builds
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
# 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:buildWe welcome contributions! Please see our Contributing Guide and Code of Conduct.
MIT License - free for personal and commercial use.
Built by Aniruddha Agarwal