BoldKit

Bold. Raw. Beautiful.

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

Website · Documentation · Components · Shapes

Preview

45+ beautifully crafted neubrutalism components 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
45+ Components	Buttons, Cards, Dialogs, Forms, and more
42 SVG Shapes	Decorative shapes for unique layouts
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

Quick Start

React (shadcn CLI)

# Install a component
npx shadcn@latest add https://boldkit.dev/r/button.json

# Install multiple components
npx shadcn@latest add https://boldkit.dev/r/button.json https://boldkit.dev/r/card.json https://boldkit.dev/r/input.json

# Install shapes
npx shadcn@latest add https://boldkit.dev/r/shapes.json

# Install theme (CSS variables)
npx shadcn@latest add https://boldkit.dev/r/theme.json

Vue 3 (shadcn-vue CLI)

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

# Install multiple components
npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json https://boldkit.dev/r/vue/card.json https://boldkit.dev/r/vue/input.json

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

# Install theme (CSS variables)
npx shadcn-vue@latest add https://boldkit.dev/r/vue/theme.json

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.

Using Registry Alias

React - Add to your components.json:

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

Vue - Add to your components.json:

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

Then install:

npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/input
# or for Vue
npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/input

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

Layout & Containers

Card
Layered Card (stacked paper effect)
Dialog
Drawer
Sheet
Accordion
Collapsible
Tabs
Scroll Area
Aspect Ratio
Separator

Feedback & Status

Alert
Alert Dialog
Badge
Progress
Skeleton
Sonner (Toast)

Navigation

Breadcrumb
Dropdown Menu
Command Palette
Pagination
Popover
Tooltip
Hover Card

Data Display

Avatar
Table
Calendar
Charts (Recharts for React, vue-echarts for Vue)

Decorative (Neubrutalism Special)

Sticker (rotated labels)
Marquee (scrolling ticker)
42 SVG Shapes (Burst, Blob, Lightning, Heart, Star, Sun, Planet, and more)

Shapes

42 decorative SVG shapes 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>

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

Name		Name	Last commit message	Last commit date
Latest commit History 63 Commits
.github		.github
assets		assets
packages/vue		packages/vue
public		public
registry/default		registry/default
scripts		scripts
src		src
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
registry.json		registry.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

BoldKit

Preview

What is Neubrutalism?

Features

Quick Start

React (shadcn CLI)

Vue 3 (shadcn-vue CLI)

Nuxt

Using Registry Alias

Usage

React

Vue 3

Components

Shapes

React

Vue 3

Theming

Tech Stack

React

Vue 3

Nuxt

Shared

Project Structure

Development

Contributing

License

About

Uh oh!

Releases 6

Packages

Contributors 2

Uh oh!

Languages

License

ANIBIT14/boldkit

Folders and files

Latest commit

History

Repository files navigation

BoldKit

Preview

What is Neubrutalism?

Features

Quick Start

React (shadcn CLI)

Vue 3 (shadcn-vue CLI)

Nuxt

Using Registry Alias

Usage

React

Vue 3

Components

Shapes

React

Vue 3

Theming

Tech Stack

React

Vue 3

Nuxt

Shared

Project Structure

Development

Contributing

License

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 6

Packages 0

Contributors 2

Uh oh!

Languages

Packages