Coming from shadcn
Rime installs, names and reads like shadcn/ui, so what you (and your AI agents) already know carries over. The components underneath are Rime's own: CSS Modules and tokens, no Tailwind.
What is the same
npx shadcn@latest add KezLahd/rime/button: you own the copied source.- Item names follow shadcn (button, dialog, dropdown-menu, input-otp, sonner...), and the shadcn MCP server works.
- Button variants and sizes accept shadcn's names; Card has the shadcn parts; asChild on buttons and triggers; data-slot on every part.
- shadcn's CSS variable names exist as aliases (shadcn-bridge.css), and the .dark class switches dark mode.
- Charts take a ChartConfig and the ChartContainer / ChartTooltipContent primitives, with the same gliding tooltip.
What is different
- Each component is a folder: components/ui/Button/Button.tsx and Button.module.css. Style with tokens, not class strings.
- No Tailwind, Radix or cva. Install real shadcn components alongside only if a project already runs Tailwind (see the tailwind-bridge item).
- Every component documents its tokens; Rime Studio themes them, with frosted glass as the default.
Component names
| shadcn | Rime | Install |
|---|---|---|
button | Button (variant default→primary, destructive→danger, outline→secondary; link and icon sizes as in shadcn) | button |
button-group | ButtonGroup | button-group |
card | Card (+ CardHeader, CardTitle, CardContent...) (props (title, description, actions, footer) or the shadcn parts) | card |
dialog | Modal, ConfirmModal | dialog |
alert-dialog | AlertDialog | alert-dialog |
sheet, drawer | Sheet, Drawer | sheet |
dropdown-menu | Menu | dropdown-menu |
context-menu | ContextMenu | context-menu |
menubar | Menubar | menubar |
navigation-menu | NavigationMenu | navigation-menu |
popover | Popover | popover |
hover-card | HoverCard | hover-card |
tooltip | Tooltip, Toggletip | tooltip |
command | Command, CommandDialog | command |
input | TextInput | input |
input-group | InputGroup | input-group |
input-otp | OtpInput | input-otp |
textarea | Textarea | textarea |
label | Label | label |
field, form | Field, ErrorSummary | field |
checkbox | Checkbox | checkbox |
radio-group | RadioGroup | radio-group |
switch | Switch | switch |
slider | Slider | slider |
select | Select (searchable option) | select |
combobox | Combobox | combobox |
calendar, date-picker | Calendar, DateField, DateRangeFilter | date-field |
toggle, toggle-group | Toggle, ToggleGroup | toggle |
tabs | FolderTabs, SegmentedControl | tabs |
accordion | Accordion | accordion |
collapsible | Collapsible | collapsible |
breadcrumb | Breadcrumb | breadcrumb |
pagination | Pagination (in Table) | table |
table, data-table | Table + FilterBar + Pagination (the list page pattern) | table |
badge | Badge, StatusPill, CountBadge | badge |
avatar | Avatar | avatar |
separator | Divider | separator |
progress | Meter, ProgressBar | progress |
skeleton | Skeleton | skeleton |
spinner | Spinner | spinner |
kbd | Kbd | kbd |
alert | Alert | alert |
sonner, toast | Toast + ToastProvider | sonner |
empty | EmptyState | empty |
scroll-area | ScrollArea | scroll-area |
aspect-ratio | AspectRatio | aspect-ratio |
carousel | Carousel | carousel |
resizable | ResizablePanelGroup, ResizablePanel, ResizableHandle | resizable |
chart | LineChart, AreaChart, BarChart, DonutChart, ChartContainer | chart |
sidebar | SidebarShell (components/shell) | sidebar |
Variable names
One way only: the shadcn names point at Rime tokens. Edit the Rime tokens (or theme.css), never the aliases.
| shadcn | Rime token |
|---|---|
--background | --page-base |
--foreground | --ink-body |
--card / --card-foreground | --surface-solid / --ink-body |
--popover / --popover-foreground | --popover-surface / --ink-body |
--primary / --primary-foreground | --brand-action / --ink-inverse |
--secondary / --secondary-foreground | --surface-sunken / --ink-heading |
--muted / --muted-foreground | --surface-sunken / --ink-muted |
--accent / --accent-foreground | --wash-hover / --ink-heading |
--destructive | --danger-base-solid |
--border | --line |
--input | --line-input |
--ring | --focus-color |
--radius | --r-md |
--chart-1..5 | --chart-1..5 |
--sidebar* | --chrome-sidebar, --brand-action, --wash-active, --line-soft |
--font-sans / --font-heading | --font-body / --font-display |