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

npx @dreamy-ui/cli init

pnpm dlx @dreamy-ui/cli init

yarn dlx @dreamy-ui/cli init

bunx @dreamy-ui/cli init

The CLI will automatically:

1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install all required dependencies (Panda CSS + Dreamy UI)
3. Create and configure panda.config.ts
4. Update vite.config.ts or postcss.config.mjs with Panda CSS PostCSS plugin
5. Remove default Tailwind CSS (React Router v7 and Next.js only)
6. Set up CSS files with proper imports
7. Create a DreamyProvider component
8. Update your tsconfig.json with @/* path alias and styled-system (if using TypeScript)
9. Next.js also gets styled-system/* path alias for proper type resolution
10. Run Panda CSS codegen to generate the styled-system
11. Add recommended components (button, flex, text, heading) to get you started
12. Prints out code to add to the root of your application

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

• Next.js
• React Router
• Remix
• Vite

Install panda by following the panda CSS installation for your framework.

npm install @dreamy-ui/react @dreamy-ui/panda-preset @dreamy-ui/cli motion

pnpm install @dreamy-ui/react @dreamy-ui/panda-preset @dreamy-ui/cli motion

yarn install @dreamy-ui/react @dreamy-ui/panda-preset @dreamy-ui/cli motion

bun install @dreamy-ui/react @dreamy-ui/panda-preset @dreamy-ui/cli motion

After installing, you should configure your panda config with Dream preset. Copy and paste the following code into your panda.config.ts file:

import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
import { patterns } from "./app/components/patterns";
import { recipes } from "./app/components/recipes";
 
export default defineConfig({
	preflight: true,
	watch: true,
	jsxFramework: "react",
	jsxStyleProps: "all",
	outExtension: "js",
	jsxFactory: "dreamy",
	include: [
		"./app/**/*.{js,jsx,ts,tsx}" // Replace with your app source directory
	],
	presets: [createDreamyPreset()],
	plugins: [dreamyPlugin()],
	patterns: {
		extend: patterns
	},
	theme: {
		extend: {
			recipes
		}
	},
	globalCss: {
		extend: {}
	},
	staticCss: {
		extend: {}
	},
	
});

Note: The patterns and recipes imports are automatically configured by the CLI based on your framework. The paths will be adjusted for Next.js (./src/components or ./components) or Vite (./src/components).

Add DreamyProvider to the root of your app. It is a wrapper for your app, which provides Dreamy UI with all the necessary context.

import { DreamyProvider } from "@dreamy-ui/react";
import domMax from "motion/react";
 
export default function App() {
	return (
		<DreamyProvider motionFeatures={domMax}>
			<YourApp />
		</DreamyProvider>
	);
}

Create a new component and use some Dreamy UI components!

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