Installation

Requirements

• Next.js App Router (16 or newer), React 19, TypeScript.
• The path alias "@/*": ["./*"] in tsconfig.json, and no src/ directory (files land at components/ui/... and app/styles/...).

With the shadcn CLI

Everything (base styles, every component, the shells, the charts and the barrel) in one command. Re-run it with --diff to see updates, then --overwrite to take them.

npx shadcn@latest add KezLahd/rime/kit

The address is KezLahd/rime/<item>: the GitHub repo that holds registry.json. Until the repo is public on GitHub, replace KezLahd in rime.config.json (or use the hosted mirror below).

Styles and providers

@import "./styles/tokens.css";        /* every token: Rime Default, Rime Flat, light and dark */
@import "./styles/base.css";          /* reset, type, focus, keyframes */
@import "./styles/shadcn-bridge.css"; /* shadcn variable names, aliased */
@import "./styles/theme.css";         /* optional: your theme from Rime Studio */

import { ToastProvider } from "@/components/ui";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ToastProvider>{children}</ToastProvider>
      </body>
    </html>
  );
}

Dark mode and the Flat preset are attributes on <html>: see Dark mode.

One component at a time

Every component page has its own install command. Items are named as shadcn names them where there is an equivalent (button, dialog, dropdown-menu, select, sheet...), so an agent trained on shadcn finds them.

npx shadcn@latest add KezLahd/rime/base KezLahd/rime/select KezLahd/rime/dialog

The @rime namespace and MCP

The docs site serves a built mirror of the registry at https://rime.mjsons.net/r. Add it as a namespace in components.json to install with @rime/button and to let the shadcn MCP server search Rime:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "tailwind": { "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true },
  "aliases": { "components": "@/components", "ui": "@/components/ui", "utils": "@/components/ui/_internal/cx" },
  "registries": { "@rime": "https://rime.mjsons.net/r/{name}.json" }
}

{ "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }

Manual

1. Copy app/styles (tokens.css, base.css, shadcn-bridge.css) and components/ui/_internal from this repo.
2. Copy the component folders you need from components/ui (each component page lists its files and dependencies).
3. Install lucide-react (and recharts for charts).
4. Import the styles as above. Update the import paths if your alias differs.