DEV Community: Aniruddha Agarwal

BoldKit Now Supports Vue 3: 45+ Neubrutalism Components for Vue Developers

Aniruddha Agarwal — Sat, 07 Feb 2026 06:15:32 +0000

Hey Vue developers! 👋

Remember BoldKit, the neubrutalism component library I introduced a few weeks ago? Well, I've got exciting news — BoldKit v2.0 is here with full Vue 3 support!

If you missed the original announcement, BoldKit brings the bold, raw aesthetic of neubrutalism to your projects with thick borders, hard shadows, and high-contrast colors that make your UI pop.

What's New in v2.0?

The entire component library has been ported to Vue 3:

45+ components built with Composition API
35 SVG shapes for decorative elements
16 chart types powered by vue-echarts
2 templates (Landing Page & Portfolio)
Full TypeScript support
Compatible with shadcn-vue CLI

Quick Start

Getting started is dead simple. If you're using shadcn-vue:

# Install a single 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

Or set up the registry alias in your components.json:

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

Then install with:

npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/dialog

Code Example

Here's what a simple card looks like in Vue:

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

Clean, readable, and fully typed. Just how Vue should be. 😎

Vue-Specific Tech Stack

BoldKit Vue is built on solid foundations:

Package	Purpose
Reka UI	Headless primitives (Vue port of Radix UI)
vue-echarts	Charts and data visualization
vue-sonner	Toast notifications
vaul-vue	Drawer component
lucide-vue-next	Icons
class-variance-authority	Variant management

All components use the <script setup> syntax with full TypeScript support and proper type inference.

What's Included?

Form Components

Button, Input, Textarea, Checkbox, Radio Group, Select, Switch, Slider, Label, Input OTP

Layout & Containers

Card, Layered Card, Dialog, Drawer, Sheet, Accordion, Collapsible, Tabs, Scroll Area, Aspect Ratio, Separator

Feedback & Status

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

Navigation

Breadcrumb, Dropdown Menu, Command Palette, Pagination, Popover, Tooltip, Hover Card

Data Display

Avatar, Table, Calendar, Charts (Area, Bar, Line, Pie, Radar, Radial)

Decorative (Neubrutalism Special)

Sticker, Stamp, Sticky Note, Marquee, 35 SVG Shapes

Interactive Documentation

The BoldKit docs now have a framework toggle. Switch between React and Vue to see code examples for your preferred framework:

Every component has Vue source code
Every example shows Vue usage
Installation commands update automatically

Theming Works the Same

The CSS is identical between React and Vue. All the neubrutalism magic comes from CSS variables:

:root {
  --primary: 0 84% 71%;       /* Coral */
  --secondary: 174 62% 56%;   /* Teal */
  --accent: 49 100% 71%;      /* Yellow */
  --shadow-color: 240 10% 10%;
  --radius: 0rem;             /* Keep it square! */
}

Use the Theme Builder to create custom themes — it works for both frameworks.

Why Neubrutalism?

If you're new to the style, neubrutalism is characterized by:

Thick borders — 3px solid borders that define elements
Hard shadows — Offset shadows with zero blur (4px 4px 0px)
Bold colors — High-contrast, vibrant palettes
Square corners — No border-radius allowed!
Raw typography — Bold, uppercase text for emphasis

It's the anti-minimalism movement, and it's perfect for portfolios, landing pages, and apps that want to stand out.

Contributing

BoldKit is open source (MIT license). If you find bugs, have ideas, or want to contribute components, PRs are welcome!

Whether you're a React developer or a Vue enthusiast, BoldKit has you covered. Give it a try and let me know what you build!

Drop a ⭐ on GitHub if you find it useful.

Happy coding! 🚀

Introducing BoldKit: A Neubrutalism React Component Library

Aniruddha Agarwal — Fri, 30 Jan 2026 14:20:04 +0000

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.

Why BoldKit?

I built BoldKit because I wanted:

shadcn/ui compatibility - Same architecture, 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

Quick Start

It's literally one command:

npx shadcn@latest add https://boldkit.dev/r/button.json

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

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" />

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

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

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

Then install components like:

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! 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

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

DEV Community: Aniruddha Agarwal

BoldKit Now Supports Vue 3: 45+ Neubrutalism Components for Vue Developers

What's New in v2.0?

Quick Start

Code Example

Vue-Specific Tech Stack

What's Included?

Form Components

Layout & Containers

Feedback & Status

Navigation

Data Display

Decorative (Neubrutalism Special)

Interactive Documentation

Theming Works the Same

Why Neubrutalism?

Links

Contributing

Introducing BoldKit: A Neubrutalism React Component Library

Introducing BoldKit: Neubrutalism for React

What is Neubrutalism?

Why BoldKit?

Quick Start

What's Included?

45 Components

30 SVG Shapes

Code Example

Theming

Dark Mode

Registry Setup (Optional)

Tech Stack

Links

Contributing

Try It Today