The Dreamy UI CLI helps you initialize and manage your Dreamy UI project with ease.

The CLI is included when you install the @dreamy-ui/cli package:

pnpm add -D @dreamy-ui/cli

Or run it directly without installing:

pnpm dlx @dreamy-ui/cli [command]

Initialize Dreamy UI in your project with automatic setup.

pnpm dlx @dreamy-ui/cli init

What it does:

1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install required dependencies:
   • Dev: @pandacss/dev, @pandacss/postcss, @dreamy-ui/cli
   • Prod: @dreamy-ui/react, @dreamy-ui/panda-preset, motion
3. Create and configure panda.config.ts with the Dreamy preset, patterns, and recipes
4. Add a prepare script (panda codegen) to package.json
5. Configure PostCSS (postcss.config.mjs) — Next.js only
6. Update vite.config with the Panda CSS PostCSS plugin — Vite and React Router only (removes Tailwind if present)
7. Remove the default Tailwind CSS setup — React Router v7 only
8. Set up your CSS file with Panda layers and import it in your app entry
9. Update tsconfig.json — add styled-system/**/* to include and an @/ui path alias (Next.js also gets styled-system/*)
10. Create a components/dreamy-provider.tsx wrapper component
11. Wire up DreamyProvider in your app root (with SSR color mode for React Router and Next.js)
12. Add recommended starter components (button, flex, text, heading)
13. Run Panda CSS codegen to generate styled-system

If automatic root setup is not possible, the CLI prints the code you need to add manually.

Options:

• --yes, -y - Skip all prompts and use defaults
• --skip-install - Skip dependency installation (useful if you want to install manually)
• --skip-components - Skip adding recommended components (button, flex, text, heading)

Examples:

pnpm dlx @dreamy-ui/cli init

Add Dreamy UI components to your project.

pnpm dlx @dreamy-ui/cli add [components...]

Examples:

pnpm dlx @dreamy-ui/cli add button

Options:

• --all - Add all available components
• --force, -f - Overwrite existing files
• --dry-run, -d - Preview changes without writing files
• --outdir <dir> - Specify output directory for components
• --tsx - Force TypeScript output

What it does:

1. Downloads component files from the registry
2. Installs component dependencies (other components)
3. Adds required recipes and patterns
4. Runs Panda CSS codegen

List all available components in the Dreamy UI registry.

pnpm dlx @dreamy-ui/cli list

Shows a table of all available components with their names and descriptions.

Compare your local components with the registry versions.

pnpm dlx @dreamy-ui/cli diff [component]

Examples:

pnpm dlx @dreamy-ui/cli diff button

What it shows:

• Files that are up-to-date ✓
• Files that differ from registry ✗
• Files that don't exist locally →
• A detailed diff of changes

If you get a "command not found" error, use npx or install the CLI locally:

pnpm add -D @dreamy-ui/cli

If the CLI can't detect your framework:

1. Make sure you have a config file (react-router.config.ts, next.config.js/ts/mjs, or vite.config.ts)
2. The file should be in the root of your project
3. Try running from your project root directory

Remix projects using Vite are detected as Vite.

After running init, you might need to:

1. Restart your TypeScript server (VS Code: Cmd/Ctrl + Shift + P → "Restart TS Server")
2. Run npx panda codegen to generate types
3. Check that styled-system/**/* is in your tsconfig.json include array

If dependency installation fails during init, run without installing dependencies:

pnpm dlx @dreamy-ui/cli init --skip-install

The CLI respects these environment variables:

• HTTPS_PROXY - Use a proxy for fetching components from the registry
• REGISTRY_URL - Override the default registry URL (for development)

For more help with any command:

pnpm dlx @dreamy-ui/cli --help

Visit our documentation for more information.