BoldKit

Bold. Raw. Beautiful.

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

[blocked]

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

Preview

55+ beautifully crafted neubrutalism components, 10 chart types, 64 SVG shapes, 17 animated ASCII shapes, 19 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

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
# CLInpx boldkit add button card dialognpx 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 componentnpx shadcn@latest add @boldkit/button
# Install multiple componentsnpx shadcn@latest add @boldkit/button @boldkit/card @boldkit/input
# Install shapesnpx shadcn@latest add @boldkit/shapes
# Install the BoldKit theme (CSS variables)npx shadcn@latest add @boldkit/styles

Vue 3 (shadcn-vue CLI)

# Install a componentnpx shadcn-vue@latest add @boldkit/button
# Install multiple componentsnpx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/input
# Install shapesnpx 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.

# Reactnpx shadcn@latest add https://boldkit.dev/r/button.json
# Vuenpx 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/itemnpx shadcn@latest add ANIBIT14/boldkit/button
# Install multiplenpx shadcn@latest add ANIBIT14/boldkit/button ANIBIT14/boldkit/card
# Pin to a tag, branch, or commit SHA for reproducible installsnpx shadcn@latest add ANIBIT14/boldkit/button#main
# Browse / preview before installingnpx shadcn@latest list ANIBIT14/boldkitnpx shadcn@latest view ANIBIT14/boldkit/buttonnpx 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 modulenpx nuxi@latest module add shadcn-nuxt
# 2. Initialize shadcn-vue (select Nuxt when prompted)npx shadcn-vue@latest init
# 3. Install BoldKit componentsnpx 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

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:

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

# Reactnpx shadcn@latest add "https://boldkit.dev/r/ascii-shapes.json"
# Vue 3 / Nuxtnpx 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

# Clonegit clone https://github.com/ANIBIT14/boldkit.gitcd boldkit
# Installnpm install
# Dev server (React docs site)npm run dev
# Buildnpm run build
# Build registrynpm run registry:build

Contributing

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

License

MIT License - free for personal and commercial use.