Docs

Requirements

A React 19 app with Tailwind CSS 4 and shadcn set up (npx shadcn@latest init). Most components animate with motion; the CLI installs it for you when a component needs it.

Install with the shadcn CLI

Point the CLI at a component's registry file:

npx shadcn@latest add https://purrfectui.com/r/button.json

Swap button for any slug from the components page. Each component page has the command ready to copy, for npm, pnpm, yarn and bun.

Use the @purrfectui registry

Add the registry to components.json once:

{
  "registries": {
    "@purrfectui": "https://purrfectui.com/r/{name}.json"
  }
}

Then install by name:

npx shadcn@latest add @purrfectui/button

The same names work from the shadcn MCP server in Claude Code, Cursor or VS Code (npx shadcn@latest mcp init --client claude), then ask for add @purrfectui/button.

Copy the source

Prefer no CLI? Open a component, copy its file from the Code tab and drop it into your project. Install the dependency it imports, usually motion.

Sound

Components mark their clicks with data-cuelume-* attributes (tap, toggle, open, navigate...). Without a sound engine they stay silent. To hear them, add Cuelume and bind it once on the client:

import { bind } from "cuelume";

bind(); // call once, in a client component

Browsers block audio until the first click or key press, so the first cue plays after that.

Reduced motion

Every component honors prefers-reduced-motion: movement gets shorter and gentler instead of switching off.