Getting started

Install the package, load the styles and the fonts, then import components.

Install

The package is on GitHub Packages. Set a token with the read:packages scope, add the registry to .npmrc, then install.

Code

export GH_PACKAGES_TOKEN=$(gh auth token)

# .npmrc
@richapiai:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GH_PACKAGES_TOKEN}

pnpm add @richapiai/design-system

Import the styles

Import the stylesheet once, in the root layout. It holds the tokens and every component class.

Code

import "@richapiai/design-system/styles.css";

Tailwind

In Tailwind 4, import the theme file after Tailwind. It maps the tokens to utilities such as text-ink and bg-surface.

Code

@import "@richapiai/design-system/styles.css";
@import "tailwindcss";
@import "@richapiai/design-system/tailwind.css";

Fonts

The package has no font files. With next/font, the font gets a generated family name. Point the tokens at the variables that next/font sets. Put this rule after the styles.css import.

Code

:root {
  --ra-font-sans: var(--font-geist-nf), ui-sans-serif, system-ui, sans-serif;
  --ra-font-mono: var(--font-geist-mono-nf), ui-monospace, monospace;
  --ra-font-serif: var(--font-caslon-nf), Georgia, serif;
}

Server and client components

Client components use React state or effects. Each one starts with "use client", so a server component can render them. Server components need no client JavaScript.

Client components

Combobox, Segmented, Tabs, Dialog, Drawer, AlertDialog, CommandPalette, filterCommands, Toast, ToastProvider, useToast, CopyButton, CodeBlock, codeTokens, Composer, Countdown, timeLeft, BulkInput, FileDrop, Feedback, FilterPills, SecretField, ToolList, HoverCard, useHotkeys, RetryButton, TagInput, ThemeSwitch

Server components

cx, Button, IconButton, buttonClass, Pill, Chip, Kbd, Dot, Avatar, AvatarGroup, initials, Card, CardHeader, CardBody, CardFooter, Stat, Meter, meterPercent, Field, fieldA11y, Input, Textarea, Select, Checkbox, Radio, Switch, Menu, MenuPanel, MenuItem, MenuSeparator, MenuSearch, cssIdent, Tooltip, Banner, EmptyState, Skeleton, Json, jsonTokens, KeyValue, Receipt, Table, List, ListRow, Pager, Steps, Timeline, Rail, RankList, Legend, Cost, Handoff, BarChart, Spark, barHeights, AppShell, Sidebar, NavGroup, NavItem, TeamSwitcher, UserRow, PageHeader, MobileTop, AskPanel, AskLauncher, Thread, Message, Citation, ApprovalCard, PlanCard, PackOption, PoolList, Pool, BigNumber, Verdict, PromoTag, LockCallout, PlanPill, FieldGrid, RunBar, ResultPanel, ErrorBox, DataOut, CsvPreview, SkippedRows, ChoiceCard, parseList, parseCsv, RunLog, RunRow, RunDetail, FilterBar, SummaryStrip, AgentRow, ActivityLog, AiPlan, ThinkingSteps, StreamingText, Suggestions, ConfirmDiff, EndpointList, EndpointItem, KeyRow, DocNav, DocMeta, ActionBar, SplitPane, PromptCard, Breadcrumb, Separator, SettingsRow, DangerZone, ErrorPage, Popover, PopoverPanel, Progress, Spinner, StatusLink, RelativeTime, resolveTheme, setTheme, themeScript, formatCredits, formatNumber, formatUsd, relativeTime