Aniruddha Agarwal

Posted on Feb 7

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

#vue #webdev #javascript #opensource

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

Top comments (1)

Aniruddha Agarwal • Feb 7

                                                                                                                                                                                                                                       Thanks for reading! If you're coming from the React version, I'd love to hear how the Vue experience compares. And if you're trying BoldKit for the first time — what components are you most excited to use?

Feel free to drop any questions or feature requests here or on github.com/ANIBIT14/boldkit. Happy building! 🚀

DEV Community