Set up Quiet Spirit

Use a React 19 and Tailwind v4 project with TypeScript and shadcn configured. The registry is public and requires no credentials.

Connect the registry

Merge this registry entry into your existing components.json.

{
  "registries": {
    "@kaotypr": "https://ui.kaotypr.io/r/{name}.json"
  }
}

Install the theme and Dialog

Search the catalog, then install Quiet Spirit and Dialog. The registry adds Dialog’s Button and density dependencies automatically.

npx shadcn@4.23.0 search @kaotypr
npx shadcn@4.23.0 add @kaotypr/quiet-spirit @kaotypr/dialog

Import Dialog from @/components/ui/kaotypr/dialog if aliases.ui is @/components/ui.

Load your overrides last

Import the installed stylesheet after Tailwind and before your project stylesheet. These paths assume the entry stylesheet is app/globals.css.

@import "tailwindcss";
@import "../styles/quiet-spirit.css";
@import "./project-overrides.css";

Use data-theme="light" or data-theme="dark" to set the mode on the document or a subtree. Give overlays a portal host inside a nested theme so they inherit it.

Troubleshoot an install

Registry or namespace unknown: Check that @kaotypr is under registries in the project’s components.json. Keep the {name}.json placeholder in the URL.
Item returns 404: Run the catalog search and use the exact item name it lists. Use @kaotypr/dialog to select this registry’s Dialog.
Registry unavailable: If the catalog or an item returns 503, retry after the Workshop service is available. For local testing, build the UI app before starting its server.
Controls render without Quiet Spirit styles: Confirm the theme item installed styles/quiet-spirit.css and check the relative import path and stylesheet order.