Use the automated CLI to set up Dreamy UI in your project:

pnpm dlx @dreamy-ui/cli init

Use --yes to accept all defaults without prompts:

pnpm dlx @dreamy-ui/cli init --yes

The CLI will automatically:

1. Detect your framework (React Router v7, Next.js, TanStack Start, 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, React Router, and TanStack Start (removes Tailwind if present)
7. Remove the default Tailwind CSS setup when detected
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, Next.js, and TanStack Start)
12. Add recommended starter components (button, flex, text, heading)
13. Run Panda CSS codegen to generate styled-system

Options:

• --yes, -y — Skip all prompts and use defaults
• --skip-install — Skip dependency installation
• --skip-components — Skip adding recommended components

If you prefer manual installation or need more control, follow the framework-specific guides:

• Next.js
• React Router
• TanStack Start
• Remix
• Vite

Install Panda CSS dev dependencies and Dreamy UI packages:

pnpm add -D @pandacss/dev @pandacss/postcss @dreamy-ui/cli

Configure your Panda config with the Dreamy preset. The patterns and recipes imports are created automatically when you add components with the CLI — for a fresh manual setup, add at least one component first (npx dreamy add button) or create the components/patterns and components/recipes index files yourself.

import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { patterns } from "./components/patterns";
import { recipes } from "./components/recipes";
 
export default defineConfig({
	// ...
	jsxFactory: "dreamy",
	include: [
		"./app/**/*.{js,jsx,ts,tsx}" // Adjust for your framework — see guides below
	],
	presets: [createDreamyPreset()],
	plugins: [dreamyPlugin()],
	patterns,
	theme: {
		extend: {
			recipes
		}
	}
});

The include path and build-tool setup (Vite PostCSS plugin, PostCSS config, CSS layers) differ per framework — see the linked guides above.

Add Panda codegen to your package.json so types are generated after install:

{
	"scripts": {
		"prepare": "panda codegen"
	}
}

Add styled-system/**/* to the include array and an @/ui path alias in tsconfig.json:

{
	"compilerOptions": {
		"paths": {
			"@/ui": ["./components/ui"]
		}
	},
	"include": ["**/*.ts", "**/*.tsx", "styled-system/**/*"]
}

Next.js projects also need a styled-system/* path alias — see the Next.js guide .

Create components/dreamy-provider.tsx and wrap your app root. The exact setup depends on your framework (SSR color mode for React Router and Next.js, client-only for Vite). See the framework guides for copy-paste examples.

Add the components you need, then generate the styled-system:

pnpm dlx dreamy add button flex text heading

Import components from @/ui — they are copied into your project by the CLI:

import { Button } from "@/ui";
 
export default function Index() {
	return <Button variant="primary">I am a Dream Button 🚀</Button>;
}