胡萝卜UI
用于 CodeRabbit 的响应组件库 。 建造在 基础UI样式 尾风 CSS v4,以OKLCH颜色系统为主.
安装
1. 安装
pnpm add @coderabbitai/carrot-ui
同伴依赖性 :
pnpm add react react-dom tailwindcss @tailwindcss/vite
2. 配置CSS
在您的 CSS 切入点( 例如 ). index.css:
@import "tailwindcss";
@import "@coderabbitai/carrot-ui/css";
这导入了主题符号,颜色尺度,暗模式变体,并让Tailwind扫描库,以获取工具类.
3. 设立Vite
添加 Tailwind CSS Vite 插件 :
import tailwindcss from "@tailwindcss/vite"
export default defineConfig({
plugins: [tailwindcss(), react()],
})
4. 暗模式
胡萝卜 UI 使用 data-theme="dark" 用于暗模式。 它必须设置在 <html> 元素, CSS 变量在 :root数字 :
<html data-theme="dark">
...
</html>
在反应中,设置它 document.documentElement数字 :
document.documentElement.setAttribute("data-theme", "dark")
使用量
import { Button, Badge, Avatar } from "@coderabbitai/carrot-ui"
function App() {
return (
<div className="bg-cui-base-1 text-cui-primary min-h-screen p-8">
<Button>Click me</Button>
<Badge variant="accent">New</Badge>
<Avatar seed="[email protected]" />
</div>
)
}
提供商品牌图标也可从包根获得:
import { SlackIcon } from "@coderabbitai/carrot-ui"
function SlackLink() {
return <SlackIcon className="size-4" title="Slack" />
}
文档
运行 pnpm dev 访问 /reference 整个游乐场。 基金会:
- 颜色 (单位:千美元)
/reference/foundations/colors)——OKLCH天平和语义符号 - 间距 (单位:千美元)
/reference/foundations/spacing)——间隔尺度 - 原则 (单位:千美元)
/reference/foundations/principles——跨领域设计和API公约每个组成部分如下. 资料来源:principles.mdx——可直接在GitHub上读取.
如果你正在编写一个新的组件,从 原则 ——它是视觉和API公约的真理来源.
发展
pnpm install
pnpm dev # playground dev server
pnpm build # library build (dist/)
pnpm typecheck # type checking
pnpm lint # linting
出版
请从更改中打开发布 PR main。使用常规承诺前缀,例如 fix: 财务报告和审定财务报表 feat: 因此发布请选择下一个版本. 合并发行版请 PR 以缓冲 package.json,更新 CHANGELOG.md,创建 v* 标签,并公布软件包.
出版工作流程检查 v* 标记匹配 package.json,发布到 GitHub 包和 公共 npm 注册,然后上传到 GitHub 发行. 手动 v* 标签仍然有效, 但标签版本必须匹配 package.json。 。 。 .
需要的 GitHub 动作秘密 :
CODERABBIT_NPM_TOKEN: npm 为公共 npm 注册发布令牌.GITHUB_TOKEN:内置的 GitHub Actions 令牌用于 GitHub 套件, 释放 PR, 标记, 并释放出资产.RELEASE_PLEASE_TOKEN: 可选的 GitHub 令牌, 请发行 。 如果发布时使用此功能 请 PRs 需要正常的 CI 检查才能运行 .
在设置下配置 GitHub 中的寄存器机密 .