@bergetai/ ui (英语)
Berget的反相设计系统,建立在 基础UI, Tailwind CSS v4, 和阴影组件常规。 向公众公布npm登记 console, (中文(简体) ), landing-page,还有凯克洛克主题.
安装
pnpm add @bergetai/ui
同伴依赖关系
| 软件包 | 范围 | 为什么 |
|---|---|---|
react 编号 : react-dom | ^19 | App 拥有 React 运行时间( 单个副本) |
tailwindcss | ^4.1 | 在消费者的建筑中发生公用事业发电 |
lucide-react | ^1 | 图标集 |
motion | ^12 | 动画( 仅在使用时) |
shiki | ^4 | 语法突出显示(仅指 @bergetai/ui/shiki(中文(简体) ) |
three, (中文(简体) ), @react-three/fiber | 选项 | 仅 @bergetai/ui/neural-flow (WebGL插图) |
pnpm~8和npm~7自动安装同位素;没有额外管理.
设置( 一个样式表, 导入一次)
/* app/globals.css */
@import 'tailwindcss';
@import '@bergetai/ui/styles';
/* No @source needed: the stylesheet scans this package's own dist for you. */
进口订单事项: @import 'tailwindcss' 先说 @bergetai/ui/styles (托盘,基层,组件键框). 别 @import 'tailwindcss' 别的地方.
为什么 @source 需要: 尾风忽略 node_modules 在内容检测时, 因此已运出样式表会通过一个 @source 这决定了相对自己。 如果您从 monrepo 源( 故事本) 导入工作表, 请添加自己的工作表 @source 给包裹的 src/ 换句话说.
使用量
import { Button, Card, CardHeader, CardTitle, CardContent } from '@bergetai/ui';
- RSC安全无虞. 每个互动模块
"use client"预告; 渲染@bergetai/ui组件直接来自服务器组件. - 组成,不是包装. 应用基本UI语义:使用
render道具(从未)asChild——被贬)和作风<a>元素为buttonVariants()而不是通过Button。 。 。 . - 只有托肯丝. 永远不要使用原始调色板类( E)
bg-blue-500),任意值(p-[13px]),或手动dark:色彩覆盖——暗模式和光模式完全由符号驱动([data-theme='light']) (中文(简体) ).className上的组件是用于布局(边距、位置、宽度),而不是重新安放;缺失的外观作为变体属于DS. - 亚伯帕斯出口.
@bergetai/ui(构成部分),@bergetai/ui/styles(CSS标志),@bergetai/ui/shiki(亮点),@bergetai/ui/neural-flow(网络GL;牵引)three作为可选对等点).
建筑
src/primitives/—— 阴影生成的 Base UI 原始(通过npx shadcn@latest add,从不手工修改;刷新--overwrite(中文(简体) )src/components/- 品牌包装:指使、cva变体,data-slot属性, 公共 APIsrc/styles/index.css——象征真理之源:品牌调色板(A节,OKLCH)-语义符号(B)-组件范围符号(C)-尾风@theme绘图(D)
发展: pnpm i 在回波根,然后 pnpm --filter @bergetai/ui dev (建设表), pnpm storybook, (中文(简体) ), pnpm typecheck, (中文(简体) ), pnpm spellcheck构成部分工作 .agents/skills/add-component 技术.
释放: workflow_dispatch 打开 release.yml 通过信任出版(OIDC)向 npm 注册机构提供版本、标签并发布.