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

Follow the Panda CSS installation guide to set up Panda CSS in your Vite project.

Install Dreamy UI in your project:

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

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

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

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

Configure environment and panda presets in your panda.config.ts file:

import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
 
export default defineConfig({
	...,
	preflight: true,
    jsxFramework: "react",
    jsxStyleProps: "all",
    outExtension: "js",
    include: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    presets: [
        createDreamyPreset()
    ],
    plugins: [dreamyPlugin],
    theme: {
		extend: {}
	},
	globalCss: {
		extend: {}
	},
	staticCss: {
		extend: {}
	}
});

Add the following alias to your tsconfig.json file:

{
	"include": [
		...
		"styled-system/*"
	],
	...
}

After configuring Panda CSS, finally we can add the main Dreamy Provider to your app root:

...
import { DreamyProvider } from "@dreamy-ui/react";
import { domMax } from "motion/react";
 
ReactDOM.createRoot(document.getElementById("root")).render(
    <DreamyProvider
        motionFeatures={domMax}
        motionStrict
        useUserPreferenceColorMode
    >
        <App />
    </DreamyProvider>
);

Now you can start using Dreamy UI in your src/App.tsx.

import { Button } from "@dreamy-ui/react";
 
function App() {
    return <Button>Dreamy UI!</Button>;
}
 
export default App;