Skip to content

Repository files navigation

Brutx Logo

BrutxUI

面向 Vue 3 + Tailwind CSS 的复制粘贴式新粗野主义组件注册表。

当你需要可见边框、强烈阴影、无障碍原语以及可直接编辑的组件代码时,就用它。

English · 中文

组件注册表 (brutx-ui-vue)

npm version npm downloads

CLI 工具 (brutx-vue)

npm version npm downloads

项目健康度

License: MIT TypeScript Vue 3 Vite Node.js pnpm


文档与预览 · NPM 组件库 · NPM CLI · 报告问题


BrutxUI 是什么?

BrutxUI 是一个面向 SaaS 应用、独立工具、仪表盘、开发者作品集、落地页和产品界面的新粗野主义设计注册表,适用于需要更强视觉冲击力的场景。

与作为单一 npm 依赖隐藏实现细节的方式不同,BrutxUI 以复制粘贴为首要原则。它遵循 shadcn/ui 推广的工作流:组件生成到你的项目中,基于 reka-ui 无障碍原语和 Tailwind CSS 构建,让你拥有代码并自由修改。


何时使用 BrutxUI

  • 适合: SaaS 产品、分析仪表盘、开发者工具、落地页、Web3 门户,以及能承载大胆界面风格的创意作品集。
  • 谨慎使用: 保守的企业仪表盘、面向患者的医疗记录、传统银行应用。当默认风格过于张扬时,Pastel(柔和)Monochrome(单色) 预设可以柔化对比度。

shadcn/ui 的关系

BrutxUI 旨在与 shadcn/ui 协同工作,而非替代它:

  • 共享工作流: BrutxUI 使用相同的 components.json 布局模式。
  • 共存: 你可以在同一项目中,对安静的 UI 表面使用 shadcn/ui 组件,对按钮、页头、定价区域或其他高对比度区域使用 BrutxUI 组件。
  • Tailwind 样式: 生成的文件合并到标准 Tailwind CSS 层中。

安装与注册表工作流

安装 BrutxUI 组件推荐使用 Brutx-Vue CLI:

Brutx-Vue CLI(推荐)

Brutx-Vue CLI 负责 Tailwind 检测、CSS 令牌注入和包管理器检测。

# 在项目中初始化 BrutxUI 配置
npx brutx-vue@latest init

# 添加指定组件
npx brutx-vue@latest add button card badge

# 一次性安装全部组件
npx brutx-vue@latest add --all

# 升级已安装的组件(使用 --overwrite 覆盖本地文件)
npx brutx-vue@latest add --all --overwrite

升级提示: 始终使用 npx brutx-vue@latest 确保运行最新版 CLI。升级组件时加 --overwrite 会覆盖本地修改,请提前备份或使用版本控制。

供应链安全: 官方 Registry 的 manifest 使用 Ed25519 签名,CLI 内置官方公钥,零配置开箱即验;强制校验用 --require-signature。默认源为 GitHub Release 资产(发布时构建上传),--offline 完全离线使用本地缓存。


尺寸系统与主题预设

BrutxUI 在样式表中暴露 CSS 自定义属性,你可以全局柔化或强化粗野主义风格:

:root {
  --brutal-border-width: 3px;     /* 布局边框粗细 */
  --brutal-radius: 0px;           /* 锐利直角 */
  --brutal-shadow-offset: 4px;    /* 常规卡片/按钮偏移 */
}

内置四种视觉预设:

  1. 经典粗野主义 (.theme-classic): 深黑阴影、霓虹强调色、锐利直角。
  2. 柔和新粗野 (.theme-pastel): 柔和色彩、较轻对比度、8px 圆角。
  3. 纯粹单色 (.theme-mono): 灰度色彩和更粗的黑色线条,适用于极简界面。
  4. 温暖粗野主义 (.theme-warm): 温暖的泥土色调与深褐硬阴影,兼顾舒适性与个性。

想先可视化调参,可以打开主题实验室:它提供产品预览、组件矩阵、对比度检查和 token 覆盖率,并生成可复制的 .theme-custom CSS。


多语言支持

BrutxUI 内置中文(zh-CN,默认)和英文(en)语言包,支持运行时切换、局部覆盖和自定义翻译,无需 vue-i18n 依赖:

import { BrutxUIPlugin, en } from 'brutx-ui-vue'

app.use(BrutxUIPlugin, { locale: en })

Claude Code Skill

BrutxUI 提供了 Claude Code Skill,让 AI 助手能够根据 BrutxUI 设计规范生成组件代码。

安装方式

skills/brutxui/ 目录复制到你的全局 Claude Code 配置目录:

# Windows
xcopy /E /I skills\brutxui %USERPROFILE%\.claude\skills\brutxui

# macOS / Linux
cp -r skills/brutxui ~/.claude/skills/brutxui

使用方式

安装后,在 Claude Code 中直接描述你的需求即可:

  • "用 BrutxUI 创建一个登录表单"
  • "帮我做一个新粗野主义风格的定价页面"
  • "BrutxUI 的 Button 组件怎么用?"

Claude 会自动参考组件文档、样式规范和代码模板,生成符合 BrutxUI 设计规范的代码。


贡献与开发

详细的本地开发设置、测试套件运行、组件注册表编译以及贡献提交流程,请参阅 贡献指南 (CONTRIBUTING.md)


致谢 / Credits

本项目基于原作者 dev-snake 的新粗野主义项目 BrutxUI (dev-snake/brutxui) 进行移植、开发与维护。非常感谢其优秀的设计和创意。


许可证

BrutxUI 是基于 MIT 许可证 的开源软件。

About

新粗野主义风格的Vue3 UI工具包,采用Next.js、Tailwind CSS和shadcn样式组件构建。

Topics

Resources

Contributing

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages