BoldKit

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

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

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

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

# 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.