@caribeth-ai/design-system

Shared React component library for Kitchen. Built with Tailwind v4, class-variance-authority, and Lucide icons.

Requirements

React 19 and Tailwind CSS v4 in the consuming app. react, react-dom, and lucide-react are peer dependencies.

Install

npm install @caribeth-ai/design-system

Public package on npmjs — no registry configuration or auth token needed.

Setup

Import the token stylesheet once at your app's entry, after Tailwind:

@import "tailwindcss";
@import "@caribeth-ai/design-system/styles/tokens.css";

This declares the @theme block and the light/dark CSS variables, and points Tailwind at the package's compiled output so the utilities the components use are emitted into your bundle. Without it, components render unstyled.

Dark mode follows a .dark class on <html>.

Usage

import { Button, Badge } from "@caribeth-ai/design-system";
import { Bot } from "@caribeth-ai/design-system/icons";
import { cn } from "@caribeth-ai/design-system/lib/utils";

Tier subpaths are also available if you want to enforce dependency direction in your own app:

import { Button } from "@caribeth-ai/design-system/atoms";

Components ship as ESM with per-file "use client" directives preserved, so React Server Component consumers get clean client boundaries. Next.js needs no transpilePackages entry.

Components

Atoms — Avatar, Badge, Button, Card, IconBox, IconButton, InlineCode, Input, MetricChip, Select, TextArea

Molecules — ApprovalActions, Banner, ChatMessage, ChipChoice, CopyChip, DefinitionGrid, DiffList, FeatureCard, FormField, IconLabel, LineDiff, MetadataCard, MultiSelect, ReviewThread, SearchBox, SectionHeader, StatTile, StepListItem, Tabs, ThemeToggle, VersionPicker

Organisms — FilterMenu, HistorySidebar, ListRow

@caribeth-ai/design-system/icons re-exports the Lucide icons used across the set.

Sizes use a shared scale: Size (sm | md | lg) for most components, ExtendedSize (xs–xl) for IconBox and IconLabel.

License

MIT