@coderabbitai/carrot-ui
v0.5.0
Published
CodeRabbit design system. React components built on Base UI, styled with Tailwind CSS v4.
Readme
Carrot UI
React component library for CodeRabbit. Built on Base UI, styled with Tailwind CSS v4, themed with an OKLCH color system.
Installation
1. Install
pnpm add @coderabbitai/carrot-uiPeer dependencies:
pnpm add react react-dom tailwindcss @tailwindcss/vite2. Configure CSS
In your CSS entry point (e.g. index.css):
@import "tailwindcss";
@import "@coderabbitai/carrot-ui/css";This imports the theme tokens, color scales, dark mode variant, and tells Tailwind to scan the library for utility classes.
3. Set up Vite
Add the Tailwind CSS Vite plugin:
import tailwindcss from "@tailwindcss/vite"
export default defineConfig({
plugins: [tailwindcss(), react()],
})4. Dark mode
Carrot UI uses data-theme="dark" for dark mode. It must be set on the <html> element so CSS variable overrides resolve correctly at :root:
<html data-theme="dark">
...
</html>In React, set it on document.documentElement:
document.documentElement.setAttribute("data-theme", "dark")Usage
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>
)
}Documentation
Run pnpm dev and visit /reference for the full component playground. Foundations:
- Colors (
/reference/foundations/colors) — OKLCH scales and semantic tokens - Spacing (
/reference/foundations/spacing) — spacing scale - Principles (
/reference/foundations/principles) — the cross-cutting design and API conventions every component follows. Source:principles.mdx— readable directly on GitHub.
If you're authoring a new component, start with Principles — it's the source of truth for the visual and API conventions.
Development
pnpm install
pnpm dev # playground dev server
pnpm build # library build (dist/)
pnpm typecheck # type checking
pnpm lint # lintingPublishing
Release Please opens release PRs from changes on main. Use conventional commit prefixes such as fix: and feat: so Release Please can choose the next version. Merge the Release Please PR to bump package.json, update CHANGELOG.md, create the v* tag, and publish the package.
The publish workflow checks that the v* tag matches package.json, publishes to GitHub Packages and the public npm registry, then uploads the packed tarball to the GitHub release. Manual v* tags still work, but the tag version must match package.json.
Required GitHub Actions secrets:
CODERABBIT_NPM_TOKEN: npm publish token for the public npm registry.GITHUB_TOKEN: built-in GitHub Actions token used for GitHub Packages, release PRs, tags, and release assets.RELEASE_PLEASE_TOKEN: optional GitHub token for Release Please. Use this if Release Please PRs need normal CI checks to run.
Configure repository secrets in GitHub under Settings → Secrets and variables → Actions.