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-ui

Peer dependencies:

pnpm add react react-dom tailwindcss @tailwindcss/vite

2. 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>
    )
}

Provider brand icons are also available from the package root:

import { SlackIcon } from "@coderabbitai/carrot-ui"

function SlackLink() {
    return <SlackIcon className="size-4" title="Slack" />
}

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         # linting

Publishing

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.