software

介绍 BoldKit：一个 Neubrutalism React 组件库

发布: (2026年1月30日 GMT+8 22:20)
4 min read
原文: Dev.to

Source: Dev.to

介绍

嗨，开发者们！我很高兴与大家分享 BoldKit，一个免费且开源的 React 组件库，拥抱新粗野主义（neubrutalism）大胆、毫不妥协的风格。如果你厌倦了那些同样光滑、圆角的 UI 库，想要一些真正脱颖而出的东西，这可能正适合你。

Neubrutalism 设计原则

  • 粗 3 px 边框，使元素突出
  • 零模糊的硬阴影（例如 4px 4px 0px）
  • 鲜艳、高对比度的颜色
  • 方形角——不允许使用 border-radius！
  • 粗体、大写排版

它原始、抢眼，完美用于制造视觉冲击。

Features

  • shadcn/ui 兼容性 – 相同的架构和熟悉的模式
  • 一键安装 – 使用您已经熟悉的 shadcn CLI
  • 完整可访问性 – 基于 Radix UI 原语构建
  • 现代技术栈 – React 19、Tailwind CSS v4、TypeScript

安装

# Install a single component
npx shadcn@latest add https://boldkit.dev/r/button.json
# Install multiple components at once
npx shadcn@latest add \
  https://boldkit.dev/r/button.json \
  https://boldkit.dev/r/card.json \
  https://boldkit.dev/r/input.json

无需管理 npm 包，也没有版本冲突——只需复制粘贴您拥有的组件。

组件目录

表单控件

  • Button (7 种变体，5 种尺寸)
  • Input, Textarea
  • Checkbox, Radio Group, Switch
  • Select, Slider, Input OTP

布局

  • Card & Layered Card（堆叠纸张效果！）
  • Dialog, Drawer, Sheet
  • Accordion, Tabs, Collapsible

反馈

  • Alert, Alert Dialog
  • Badge, Progress, Skeleton
  • Toast notifications（Sonner）

导航

  • Breadcrumb, Dropdown Menu
  • Command Palette, Pagination
  • Popover, Tooltip

装饰形状

BoldKit 包含一套装饰性的 SVG 形状，为 neubrutalism 风格增添额外的魅力。

import { BurstShape, HeartShape, LightningShape } from '@/components/ui/shapes';

可用形状：Burst, Blob, Lightning, Heart, Stars, Shield, Cloud, Diamond, Hexagon，以及另外 20 多种。

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

export function WelcomeCard() {
  return (
    
      
      
        
          欢迎使用 BoldKit
          新
        
      
      
        
构建大胆、精美的界面，轻松实现。

        
          开始使用
          了解更多
        
      
    
  );
}

使用 CSS 变量进行主题定制

:root {
  --primary: 0 84% 71%;       /* Coral */
  --secondary: 174 62% 56%;   /* Teal */
  --accent: 49 100% 71%;      /* Yellow */
  --destructive: 0 84% 60%;   /* Red */
  --shadow-color: 240 10% 10%;
  --radius: 0rem;             /* Keep it square! */
}

网站上的 主题构建器 允许您创建并导出自定义主题。内置完整的暗模式支持，且新粗野主义美学在明暗两种主题中都能出色呈现。

使用 @boldkit/component 语法

将注册表添加到你的 components.json：

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

然后使用熟悉的 shadcn CLI 安装组件：

npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/badge

技术栈

  • React 19 – 最新特性
  • Tailwind CSS v4 – 现代实用优先的 CSS
  • Radix UI – 可访问的原语
  • TypeScript – 完全类型安全
  • Class Variance Authority – 简洁的变体管理
  • Vite – 快速构建

有用链接

贡献

BoldKit 使用 MIT 许可证，欢迎贡献！您可以帮助：

  • 新组件
  • 修复错误
  • 改进文档
  • 新的 SVG 形状

查看仓库中的 Contributing Guide 开始参与。

由 Aniruddha Agarwal 爱心打造。

Back to Blog

相关文章

阅读更多 »