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

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:

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.

Links

• 🌐 Website: boldkit.dev
• 📦 GitHub: github.com/ANIBIT14/boldkit
• 📚 Docs: boldkit.dev/docs
• 🎨 Theme Builder: boldkit.dev/themes
• 🧩 Components: boldkit.dev/components

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