Skip to content
Namespace setup

Configure once. Install by name.

Add the private registry to each approved repo's components.json. The CLI expands resource names into registry URLs and sends the bearer token from the environment.

1. Add the token

Expose the registry token in the consumer repo environment.

RHYTHMIC_REGISTRY_TOKEN=your-private-token

2. Configure the namespace

Add the Rhythmic namespace to components.json.

{
  "registries": {
    "@rhythmic-ui": {
      "url": "https://design.dev.rhythmic.io/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${RHYTHMIC_REGISTRY_TOKEN}"
      }
    }
  }
}

3. Install a bundle

Use scoped @rhythmic-ui commands so auth headers and private dependencies resolve through the configured registry.

pnpm dlx shadcn@latest add @rhythmic-ui/all

# Smaller baseline:
pnpm dlx shadcn@latest add @rhythmic-ui/core

4. Use tokens and components

Typography uses type-* utilities. Colors use rd-* utilities.

<h1 className="type-display-xl">Dashboard</h1>
<h2 className="type-heading-lg">Pipeline</h2>
<p className="type-paragraph-md text-rd-neutral-600">More leads, less work.</p>
<span className="type-label-sm bg-rd-green text-rd-neutral-0">Qualified</span>

5. Theme embedded flows

Wrap a flow with the installable theming helper when a host app needs allowlisted customer colors.

import {
  RhythmicThemeProvider,
  getAllowedRhythmicThemeId,
} from "@/components/ui/theming"

const themeId = getAllowedRhythmicThemeId(searchParams.get("theme"))

export function EmbeddedFlow() {
  return (
    <RhythmicThemeProvider theme={themeId ?? "default"}>
      <Flow />
    </RhythmicThemeProvider>
  )
}

6. Browser verification

Install Playwright CLI skills when you want an agent to inspect rendered Rhythmic UI screens.

# Source:
https://github.com/microsoft/playwright-cli

# Install the CLI and local agent skills:
npm install -g @playwright/cli@latest
playwright-cli install --skills

# Example verification flow:
playwright-cli open http://localhost:5173
playwright-cli screenshot
playwright-cli console

7. Agent setup prompt

Give this to Codex or Claude Code inside a consumer project.

Set up Rhythmic UI in this project.

Rhythmic UI is a private shadcn-compatible registry. It copies source files into this project, so treat this as a shadcn/ui setup plus a private registry install.

Registry:
- Namespace: @rhythmic-ui
- URL: https://design.dev.rhythmic.io/r/{name}.json
- Auth header: Authorization: Bearer ${RHYTHMIC_REGISTRY_TOKEN}

First inspect the project:
- Detect the package manager: pnpm, npm, yarn, or bun.
- Detect the framework: Next.js, Vite, Remix, plain React, etc.
- Check whether Tailwind is installed and configured.
- Check whether shadcn/ui is already initialized.
- Check whether components.json exists.
- Check existing aliases in tsconfig.json, jsconfig.json, vite config, or framework config.
- Preserve existing aliases and project conventions.
- Do not overwrite locally customized components without showing me the diff first.

If shadcn/ui is not initialized:
- Initialize shadcn/ui with the project's package manager.
- Use the project's existing conventions where possible.
- If there is no convention, use components for components, components/ui for UI primitives, lib/utils for utilities, @/* as the import alias, CSS variables enabled, and neutral as the base color.
- Make sure components.json is created and points to the correct aliases.

If Tailwind is not installed:
- Install and configure Tailwind for the detected framework.
- Make sure global CSS imports Tailwind.
- Make sure Tailwind scans the app, components, and library paths.
- Do not replace the project's design system wholesale; add only what is required for shadcn-compatible components to work.

Update components.json to include this registry while preserving existing registries:

{
  "registries": {
    "@rhythmic-ui": {
      "url": "https://design.dev.rhythmic.io/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${RHYTHMIC_REGISTRY_TOKEN}"
      }
    }
  }
}

Before installing registry items, look for RHYTHMIC_REGISTRY_TOKEN in multiple local places:
- The current shell environment.
- .env, .env.local, .env.development, .env.development.local, and other project .env* files.
- Local untracked developer files if present, such as .envrc, .dev.vars, .npmrc, .yarnrc.yml, .vercel/.env*, or documented local setup files.
- Package scripts or README/setup docs that export or reference RHYTHMIC_REGISTRY_TOKEN.

Do not print the token value. If you find it in a file, use it only for the install command environment and report the file name, not the secret. If RHYTHMIC_REGISTRY_TOKEN is not available anywhere, stop before installing registry items and tell me exactly where to set it.

Install the full Rhythmic UI library with the detected package manager:
- pnpm: pnpm dlx shadcn@latest add @rhythmic-ui/all
- npm: npx shadcn@latest add @rhythmic-ui/all
- yarn modern: yarn dlx shadcn@latest add @rhythmic-ui/all
- yarn 1.x: npx shadcn@latest add @rhythmic-ui/all
- bun: bunx shadcn@latest add @rhythmic-ui/all

Use the scoped registry command only. Do not install Rhythmic items from raw URLs like https://design.dev.rhythmic.io/r/all.json because direct URL installs may not receive the configured auth headers.

The Rhythmic bundle is expected to resolve fully scoped registry dependencies such as @rhythmic-ui/colors and @rhythmic-ui/button. If the CLI tries to fetch https://ui.shadcn.com/r/styles/... for Rhythmic dependencies, stop and report a Rhythmic registry packaging bug instead of manually reconstructing the install.

If the CLI asks whether to overwrite existing files:
- Do not overwrite locally customized files automatically.
- Preserve existing files unless the user explicitly approves replacement.
- Record every skipped file.
- Inspect skipped files such as lib/utils, components/ui/button, or other UI primitives for compatibility with Rhythmic dependencies, tokens, and APIs.
- Report whether installation is complete or partial. If partial, describe exactly what manual merge is needed.

Font setup:
- Check whether the project already defines the Rhythmic brand font variables.
- Rhythmic typography uses --font-roobert for sans text and --font-roobert-mono for monospace text.
- The typography registry sets --rd-font-sans to var(--font-roobert, var(--font-sans, system sans fallback)).
- The typography registry sets --rd-font-mono to var(--font-roobert-mono, var(--font-mono, monospace fallback)).
- If --font-roobert is missing, the app may render Rhythmic typography with a fallback such as Geist, Inter, or system sans. That is functionally valid but not the intended brand font.
- Do not assume the shadcn preset font is correct.
- If Roobert and Roobert Mono font files or package imports are available in the project, load them using the project's framework convention and expose them globally as --font-roobert and --font-roobert-mono.
- For Next.js, prefer next/font/local or the project's existing font-loading convention, and ensure the generated variables are applied at the root layout.
- For Vite or plain React, import font CSS or define @font-face entries in the global stylesheet, then set --font-roobert and --font-roobert-mono on :root.
- Preserve existing app fonts unless the project is adopting Rhythmic as the UI design system.
- If Roobert is unavailable, report that the install is functionally complete but brand font setup is incomplete, and state exactly where to add the font files or imports.

After installation, verify:
- The generated files landed in the expected paths.
- If the CLI skipped files, verify whether the existing files are compatible with Rhythmic or need a manual merge.
- cn exists and works from the configured utils alias.
- Rhythmic color utilities like bg-rd-lime, text-rd-neutral-900, and border-rd-neutral-200 work.
- Rhythmic typography utilities like type-label-sm, type-paragraph-sm, and type-heading-xxl work.
- --font-roobert is defined in computed global styles, or report the actual fallback font being used.
- --font-roobert-mono is defined if monospace utilities or components are used.
- --rd-font-sans resolves to --font-roobert when the brand font is available, not only to --font-sans.
- Icons import from "@/components/ui/icons".
- Production routes should prefer named icon imports like import { CheckCircleIcon } from "@/components/ui/icons". Avoid the generic <Icon name="..."> API outside dynamic icon browsers/showcase routes because it references the full generated icon map and can increase JS chunk size.
- Assets import from "@/components/ui/assets".
- assetPaths.gridBackground resolves in the browser and does not 404. If the file lands under src/public/rhythmic-assets but the framework serves only public/rhythmic-assets, move or copy it to the project root public/rhythmic-assets unless that framework intentionally serves src/public.
- Theming imports from "@/components/ui/theming".
- RhythmicThemeProvider wraps embedded flows without changing layout, typography, spacing, or component structure.
- For URL-param based themes, use getAllowedRhythmicThemeId(searchParams.get("theme")) and pass the resulting ID to RhythmicThemeProvider.
- Never accept arbitrary public URL color values directly. Public URL params should select known theme IDs only.

Run the project's typecheck, lint, and build commands if available.

Do not make unrelated refactors. At the end, report whether shadcn/ui or Tailwind had to be initialized, what files changed, what files were skipped, whether the install is complete or partial, which font family is actually used by rendered Rhythmic typography, whether --font-roobert and --font-roobert-mono are defined, whether the app is using Rhythmic brand fonts or a fallback, whether theming helpers are installed and usable, what verification passed or failed, and how to update later by re-running the relevant shadcn add command.