Rime

Rime is a React component kit with frosted-glass surfaces, its own docs site, and a theme studio — installed with the shadcn CLI, themed with one CSS file, and absolutely zero Tailwind underneath.

What this repo is (and isn't)

This repo is the component kit. 69 components, 6 blocks (whole screens), charts, patterns, and a theme studio, all built from CSS Modules and CSS custom properties. The shadcn CLI copies the source into your project — you own what you install. The repo also doubles as the live docs site at rime.mjsons.net.

This repo is not a Tailwind preset or a shadcn fork. Rime emits a shadcn-compatible registry so the install flow feels identical (npx shadcn@latest add KezLahd/rime/<item>), but every component underneath is Rime's own — no Radix, no Tailwind, no shadcn primitives. Themes swap one theme.css; the rest of the kit stays put.

✦ What it does

🧊 Frosted by default

Translucent panels, lit edges, soft two-layer shadows over a tinted field. Rime Flat is the opaque variant. Both ship light and dark.

🎨 Rime Studio

Start from a preset, drop a logo to extract a palette, tune glass, shape, shadows, hover. Check contrast. Export one theme.css.

🧩 Blocks

Whole screens, one command: Dashboard · Inbox · Settings · Data Table · Auth · Shells. Install and own the source.

📈 Charts

Line, area, bar, donut, stat strips, segmented tooltips. Built on Recharts with Rime tokens.

🤖 AI ready

Every page has a markdown twin (add .md). Whole site in /llms.txt. MCP namespace @rime, AGENTS.rime.md, Claude skill.

🚀 Starter template

npx shadcn add KezLahd/rime/starter scaffolds a Next.js 16 app with Supabase auth, TOTP, dashboard behind the gate.

✦ Install Rime

npx shadcn@latest add KezLahd/rime/kit       # everything
npx shadcn@latest add KezLahd/rime/button    # one component + what it needs
npx shadcn@latest add KezLahd/rime/dashboard # the dashboard block
npx shadcn@latest add KezLahd/rime/agents    # AGENTS.rime.md + Claude skill + docs/ui
npx shadcn@latest add KezLahd/rime/starter   # the full Supabase MFA starter template

Then import the styles in app/globals.css:

@import "./styles/tokens.css";
@import "./styles/base.css";
@import "./styles/shadcn-bridge.css";
@import "./styles/theme.css"; /* your theme from Rime Studio */

Wrap your app in <ToastProvider>. Dark mode: .dark class on <html>. Rime Flat: data-theme="flat".

✦ Stack

✦ Running locally

# 1. Clone
git clone https://github.com/KezLahd/rime.git
cd rime

# 2. Install (Node 20+, developed on 24)
npm install

# 3. Dev — the docs site at http://localhost:3100
npm run dev

# 4. Production build
npm run build
npm start

After editing a component:

npm run registry        # regenerate props + token tables
npm run docs:export     # write docs/ui markdown (llms.txt + per-component .md)
npm run registry:shadcn # rebuild registry.json, public/r mirror, components.json

✦ Rime brand

The palette the kit is built from. Default theme reads these; Rime Studio lets you swap them.

✦ Project layout

app/                     Next.js App Router (the docs site)
  _docs/                 docs shell: top bar, sidebar, TOC, search, previews
  _home/                 home page sections
  components/            index + [slug] pages (one per registry entry)
  blocks/                block gallery + /view route for the iframe previews
  charts/, patterns/     gallery pages
  foundations/, colors/  tokens explorer
  studio/                Rime Studio (theming engine + panels)
  styles/
    tokens.css           every token: Rime Default, Rime Flat, light + dark
    base.css             reset, type, focus, keyframes
    shadcn-bridge.css    shadcn variable names aliased to Rime tokens

components/
  ui/                    the components (69 of them) + _registry/
  shell/                 SidebarShell, PageHeader, AuthCard
  charts/                charts and the shadcn-style chart primitives
  blocks/                whole screens shipped as registry items

agents/                  AGENTS.rime.md + Claude skill (installed by the "agents" item)
templates/starter/       Next.js 16 + Supabase MFA starter project

registry.json            the generated GitHub registry
public/r/                the generated registry mirror served from rime.mjsons.net/r
rime.config.json         publishing settings (owner, site URL, namespace, package)

✦ For AI agents

Resource	What it is
/llms.txt	The index, the rules, the shadcn name map, install lines. Start here.
/llms-full.txt	Everything in one file.
/components/<slug>.md	Any page as markdown (just add .md).
docs/ui/	The same files in the repo (npm run docs:export).
agents item	Installs AGENTS.rime.md + Claude skill into a project.

A good instruction for an agent:

Read docs/ui/llms.txt (or https://rime.mjsons.net/llms.txt) first, follow its rules, and build only with Rime components and tokens.

✦ Design rules carried by the kit

• No eyebrow or small label stacked over a title.
• No bento grids of cards. No left accent bars. No hover scale or lift by default.
• Summary stats are one card with hairline cells, never a grid of separate stat cards.
• Filters are dropdowns plus one full-width search. Sortable headers are the whole cell. Pagination is centred.
• Text uses the full width of its column — no narrow measure caps.
• The docs sidebar is transparent (the frosted sidebar belongs to SidebarShell, the dashboard rail).
• No em dashes in copy.