BoldKit

Bold. Raw. Beautiful.

A neubrutalism React component library built on shadcn/ui.

Website · Documentation · Components · Shapes

---

Preview

45 beautifully crafted neubrutalism components

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
30 SVG Shapes	Decorative shapes for unique layouts
shadcn CLI	Install directly via npx shadcn@latest add
Accessible	Built on Radix UI primitives
Dark Mode	Full light/dark theme support
TypeScript	Complete type safety
Tailwind v4	Modern CSS with latest Tailwind

Quick Start

Install with shadcn CLI (Recommended)

# 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

Using Registry Alias

Add to your components.json:

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

Then install:

npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/input

Usage

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>
  )
}

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 (via Recharts)

Decorative (Neubrutalism Special)

• Sticker (rotated labels)
• Marquee (scrolling ticker)
• 30 SVG Shapes (Burst, Blob, Lightning, Heart, Star, and more)

Shapes

30 decorative SVG shapes 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" />

Theming

Customize with CSS variables:

: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 19 - Latest React with concurrent features
• Tailwind CSS v4 - Modern utility-first CSS
• Radix UI - Accessible primitives
• TypeScript - Full type safety
• Class Variance Authority - Variant management
• Vite - Fast development and builds

Development

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

# Install
npm install

# Dev server
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