DEV Community

Cover image for Introducing BoldKit: A Neubrutalism React Component Library
Aniruddha Agarwal
Aniruddha Agarwal

Posted on • Originally published at boldkit.dev

Introducing BoldKit: A Neubrutalism React Component Library

#webdev #opensource #react #design

Introducing BoldKit: Neubrutalism for React

Hey developers! I'm excited to share BoldKit, a free and open-source React component library I've been working on. If you're tired of the same polished, rounded-corner UI libraries and want something that stands out, this might be for you.

What is Neubrutalism?

Neubrutalism (or neo-brutalism) is a bold design trend that's been taking over the web. Think:

  • Thick 3px borders that make elements pop
  • Hard shadows with zero blur (like 4px 4px 0px)
  • Vibrant, high-contrast colors
  • Square corners - no border-radius allowed!
  • Bold, uppercase typography

It's raw, it's unapologetic, and it's incredibly eye-catching.

Neubrutalism Example

Why BoldKit?

I built BoldKit because I wanted:

  1. shadcn/ui compatibility - Same architecture, familiar patterns
  2. One-command installs - Use the shadcn CLI you already know
  3. Full accessibility - Built on Radix UI primitives
  4. Modern stack - React 19, Tailwind CSS v4, TypeScript

Quick Start

It's literally one command:

npx shadcn@latest add https://boldkit.dev/r/button.json
Enter fullscreen mode Exit fullscreen mode

Or 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
Enter fullscreen mode Exit fullscreen mode

That's it. No npm packages to manage, no version conflicts. Just copy-paste components that you own.

What's Included?

45 Components

Everything you need to build complete interfaces:

Form Controls:

  • Button (7 variants, 5 sizes)
  • Input, Textarea
  • Checkbox, Radio Group, Switch
  • Select, Slider, Input OTP

Layout:

  • Card & Layered Card (stacked paper effect!)
  • Dialog, Drawer, Sheet
  • Accordion, Tabs, Collapsible

Feedback:

  • Alert, Alert Dialog
  • Badge, Progress, Skeleton
  • Toast notifications (Sonner)

Navigation:

  • Breadcrumb, Dropdown Menu
  • Command Palette, Pagination
  • Popover, Tooltip

30 SVG Shapes

Unique to BoldKit - decorative shapes for that extra neubrutalism flair:

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" />
Enter fullscreen mode Exit fullscreen mode

Shapes include: Burst, Blob, Lightning, Heart, Stars, Shield, Cloud, Diamond, Hexagon, and 20 more!

Code Example

Here's a quick example of BoldKit in action:

import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { BurstShape } from '@/components/ui/shapes'

export function WelcomeCard() {
  return (
    <Card className="relative overflow-hidden">
      <BurstShape
        size={80}
        className="absolute -top-4 -right-4 text-accent opacity-50"
      />
      <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>Get Started</Button>
          <Button variant="secondary">Learn More</Button>
        </div>
      </CardContent>
    </Card>
  )
}
Enter fullscreen mode Exit fullscreen mode

Theming

BoldKit uses CSS variables, making customization dead simple:

: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! */
}
Enter fullscreen mode Exit fullscreen mode

There's also a Theme Builder on the website where you can create and export custom themes.

Dark Mode

Full dark mode support out of the box. The neubrutalism aesthetic works beautifully in both light and dark themes.

Registry Setup (Optional)

If you want to use the cleaner @boldkit/component syntax, add this to your components.json:

{
  "registries": {
    "@boldkit": "https://boldkit.dev/r"
  }
}
Enter fullscreen mode Exit fullscreen mode

Then install components like:

npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/badge
Enter fullscreen mode Exit fullscreen mode

Tech Stack

  • React 19 - Latest features
  • Tailwind CSS v4 - Modern utility-first CSS
  • Radix UI - Accessible primitives
  • TypeScript - Full type safety
  • Class Variance Authority - Clean variant management
  • Vite - Fast builds

Links

Contributing

BoldKit is MIT licensed and open for contributions! Whether it's:

  • New components
  • Bug fixes
  • Documentation improvements
  • New SVG shapes

Check out the Contributing Guide to get started.

Try It Today 

npx shadcn@latest add https://boldkit.dev/r/button.json
Enter fullscreen mode Exit fullscreen mode

I'd love to hear what you think! Drop a comment below or open an issue on GitHub.

Star the repo if you find it useful! github.com/ANIBIT14/boldkit

Built with love by Aniruddha Agarwal

Top comments (1)

Collapse
 
aniruddha_agarwal_d3d6b0e profile image
Aniruddha Agarwal •

Thanks for reading! A few quick notes: