BoldKit 现已支持 Vue 3：为 Vue 开发者提供 45+ Neubrutalism 组件

Source: Dev.to

还记得 BoldKit，我几周前介绍的 neubrutalism 组件库吗？
好消息——BoldKit v2.0 已经发布，全面支持 Vue 3！

如果你错过了原始公告，BoldKit 将 neubrutalism 那种大胆、原始的美学带入你的项目，拥有粗边框、硬阴影和高对比度的配色，让你的 UI 更加抢眼。

新版 v2.0 有哪些新功能？

• 整个组件库已迁移至 Vue 3
  • 使用 Composition API 构建的 45+ 组件
  • 用于装饰元素的 35 个 SVG 形状
  • 由 vue-echarts 提供支持的 16 种图表类型
  • 2 个模板（Landing Page 与 Portfolio）
  • 完整的 TypeScript 支持
  • 与 shadcn‑vue CLI 兼容

快速开始

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

注册表别名（可选）

将以下内容添加到你的 components.json 中：

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

然后使用别名安装组件：

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

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

  
  
      
        欢迎来到 BoldKit
        新
      
    

    
      
轻松构建大胆且美观的界面。

      
        主要
        次要
        强调
      
    
  

简洁、可读且完整类型化。正是 Vue 应有的样子。😎

Vue‑Specific Tech Stack

All components use the “ syntax with full TypeScript support and proper type inference.

包含内容？

表单组件

• 按钮、输入框、文本域、复选框、单选组、选择框、开关、滑块、标签、一次性密码输入

布局与容器

• 卡片、层叠卡片、对话框、抽屉、工作表、手风琴、可折叠面板、标签页、滚动区域、宽高比、分隔线

反馈与状态

• 警报、警报对话框、徽章、进度条、骨架屏、吐司（Sonner）

导航

• 面包屑、下拉菜单、命令面板、分页、弹出框、工具提示、悬停卡片

数据展示

• 头像、表格、日历、图表（面积图、柱状图、折线图、饼图、雷达图、径向图）

装饰（新粗犷主义特供）

• 贴纸、印章、便利贴、跑马灯、35 个 SVG 形状

交互式文档

The BoldKit 文档 现在有框架切换功能。切换 React 与 Vue，即可查看您偏好的框架的代码示例：

• 每个组件都有 Vue 源代码
• 每个示例展示 Vue 用法
• 安装命令会自动更新

主题化工作方式相同

CSS 在 React 和 Vue 之间是完全相同的。所有的新粗犷主义魔法都来自 CSS 变量：

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

使用 Theme Builder 创建自定义主题——它适用于两个框架。

为什么是 Neubrutalism?

如果你是这类风格的新手，neubrutalism 的特征包括：

• 粗线边框 – 3 px 实线边框，用来定义元素
• 硬阴影 – 零模糊的偏移阴影（例如 4px 4px 0px）
• 大胆配色 – 高对比度的调色板，视觉冲击力强

使用 BoldKit v2.0，尽情打造大胆且美观的界面吧！ 🚀

高对比、活力十足的调色板

方形角 – 不允许使用 border‑radius！

原始排版 – 使用粗体、全大写文字来强调

它是反极简主义的运动，非常适合作品集、着陆页以及想要脱颖而出的应用。

Links

• 🌐 网站:
• 📦 GitHub:
• 📚 文档:
• 🎨 主题构建器:
• 🧩 组件:

贡献

BoldKit 是开源的（MIT 许可证）。如果您发现 bug、有什么想法，或想贡献组件，欢迎提交 Pull Request！

无论您是 React 开发者还是 Vue 爱好者，BoldKit 都能满足您的需求。试一试吧，并告诉我们您构建了什么！

如果您觉得它有用，请在 GitHub 仓库 上点一个 ⭐。

编码愉快！ 🚀