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

Source: Dev.to

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

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

Registry alias (optional)

Add the following to your components.json:

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

Then install components with the alias:

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

Code Example

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

  
  
      
        Welcome to BoldKit
        New
      
    

    
      
Build bold, beautiful interfaces with ease.

      
        Primary
        Secondary
        Accent
      
    
  

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

Vue‑Specific Tech Stack

All components use the “ 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 – 3 px solid borders that define elements
• Hard shadows – Offset shadows with zero blur (e.g., 4px 4px 0px)
• Bold colors – High‑contrast palettes that pop

Enjoy building bold, beautiful interfaces with BoldKit v2.0! 🚀

High‑contrast, vibrant palettes

Square corners – No border‑radius allowed!

Raw typography – Bold, uppercase text for emphasis

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

Links

• 🌐 Website:
• 📦 GitHub:
• 📚 Docs:
• 🎨 Theme Builder:
• 🧩 Components:

Contributing

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

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

Drop a ⭐ on the GitHub repo if you find it useful.

Happy coding! 🚀