Tools: 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? ## Contributing 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. The entire component library has been ported to Vue 3: Getting started is dead simple. If you're using shadcn-vue: Or set up the registry alias in your components.json: Here's what a simple card looks like in Vue: Clean, readable, and fully typed. Just how Vue should be. 😎 BoldKit Vue is built on solid foundations: All components use the <script setup> syntax with full TypeScript support and proper type inference. Button, Input, Textarea, Checkbox, Radio Group, Select, Switch, Slider, Label, Input OTP Card, Layered Card, Dialog, Drawer, Sheet, Accordion, Collapsible, Tabs, Scroll Area, Aspect Ratio, Separator Alert, Alert Dialog, Badge, Progress, Skeleton, Toast (Sonner) Breadcrumb, Dropdown Menu, Command Palette, Pagination, Popover, Tooltip, Hover Card Avatar, Table, Calendar, Charts (Area, Bar, Line, Pie, Radar, Radial) Sticker, Stamp, Sticky Note, Marquee, 35 SVG Shapes The BoldKit docs now have a framework toggle. Switch between React and Vue to see code examples for your preferred framework: The CSS is identical between React and Vue. All the neubrutalism magic comes from CSS variables: Use the Theme Builder to create custom themes — it works for both frameworks. If you're new to the style, neubrutalism is characterized by: It's the anti-minimalism movement, and it's perfect for portfolios, landing pages, and apps that want to stand out. 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. Templates let you quickly answer FAQs or store snippets for re-use. Feel free to drop any questions or feature requests here or on github.com/ANIBIT14/boldkit. Happy building! 🚀 Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: # 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 Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # 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 COMMAND_BLOCK: # 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 CODE_BLOCK: { "registries": { "@boldkit": "https://boldkit.dev/r/vue" } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "registries": { "@boldkit": "https://boldkit.dev/r/vue" } } CODE_BLOCK: { "registries": { "@boldkit": "https://boldkit.dev/r/vue" } } CODE_BLOCK: npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/dialog Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/dialog CODE_BLOCK: npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/dialog CODE_BLOCK: <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> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <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> CODE_BLOCK: <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> CODE_BLOCK: :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! */ } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: :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! */ } CODE_BLOCK: :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! */ } CODE_BLOCK: 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? Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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? CODE_BLOCK: 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? - 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 - Every component has Vue source code - Every example shows Vue usage - Installation commands update automatically - 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 - 🌐 Website: boldkit.dev - 📦 GitHub: github.com/ANIBIT14/boldkit - 📚 Docs: boldkit.dev/docs - 🎨 Theme Builder: boldkit.dev/themes - 🧩 Components: boldkit.dev/components - Joined Jan 30, 2026