software

Introducing BoldKit: A Neubrutalism React Component Library

Published: (January 30, 2026 at 09:20 AM EST)
3 min read
Source: Dev.to

Source: Dev.to

Introduction

Hey developers! I’m excited to share BoldKit, a free and open‑source React component library that embraces the bold, unapologetic style of neubrutalism. If you’re tired of the same polished, rounded‑corner UI libraries and want something that really stands out, this might be for you.

Neubrutalism Design Principles

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

It’s raw, eye‑catching, and perfect for making a statement.

Features

  • shadcn/ui compatibility – same architecture and familiar patterns
  • One‑command installs – use the shadcn CLI you already know
  • Full accessibility – built on Radix UI primitives
  • Modern stack – React 19, Tailwind CSS v4, TypeScript

Installation

# Install a single component
npx shadcn@latest add https://boldkit.dev/r/button.json
# Install multiple components at once
npx shadcn@latest add \
  https://boldkit.dev/r/button.json \
  https://boldkit.dev/r/card.json \
  https://boldkit.dev/r/input.json

No npm packages to manage, no version conflicts—just copy‑paste components that you own.

Component Catalog

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)
  • Breadcrumb, Dropdown Menu
  • Command Palette, Pagination
  • Popover, Tooltip

Decorative Shapes

BoldKit includes a set of decorative SVG shapes that add extra neubrutalism flair.

import { BurstShape, HeartShape, LightningShape } from '@/components/ui/shapes';

Available shapes: Burst, Blob, Lightning, Heart, Stars, Shield, Cloud, Diamond, Hexagon, and 20+ more.

Quick Example

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 (
    
      
      
        
          Welcome to BoldKit
          New
        
      
      
        
Build bold, beautiful interfaces with ease.

        
          Get Started
          Learn More
        
      
    
  );
}

Theming 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! */
}

A Theme Builder on the website lets you create and export custom themes. Full dark‑mode support is built in, and the neubrutalism aesthetic works beautifully in both light and dark themes.

Using the @boldkit/component Syntax

Add the registry to your components.json:

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

Then install components with the familiar shadcn CLI:

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

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

Contributing

BoldKit is MIT‑licensed and open for contributions! You can help with:

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

Check out the Contributing Guide in the repository to get started.

Built with love by Aniruddha Agarwal.

Back to Blog

Related posts

Read more »