Use the automated CLI to set up Dreamy UI in your project:
pnpm dlx @dreamy-ui/cli initThe CLI will automatically:
- Detect your framework (React Router v7, Next.js, TanStack Start, or Vite)
- Install required dependencies:
- Dev:
@pandacss/dev,@pandacss/postcss,@dreamy-ui/cli - Prod:
@dreamy-ui/react,@dreamy-ui/panda-preset,motion
- Dev:
- Create and configure
panda.config.tswith the Dreamy preset, patterns, and recipes - Add a
preparescript (panda codegen) topackage.json - Update
vite.configwith the Panda CSS PostCSS plugin (removes Tailwind if present) - Set up
src/index.csswith Panda layers and import it insrc/main.tsx - Update
tsconfig.json— addstyled-system/**/*toincludeand an@/uipath alias - Create a
components/dreamy-provider.tsxwrapper component - Wire up
DreamyProviderinsrc/main.tsx - Add recommended starter components (
button,flex,text,heading) - Run Panda CSS codegen to generate
styled-system
pnpm add -D @pandacss/dev @pandacss/postcss @dreamy-ui/cliAdd the Panda CSS PostCSS plugin to vite.config.ts:
import pandacss from "@pandacss/dev/postcss";
export default defineConfig({
// ...
css: {
postcss: {
plugins: [pandacss]
}
}
});import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { patterns } from "./components/patterns";
import { recipes } from "./components/recipes";
export default defineConfig({
// ...
jsxFactory: "dreamy",
include: ["./src/**/*.{js,jsx,ts,tsx}"],
presets: [createDreamyPreset()],
plugins: [dreamyPlugin()],
patterns,
theme: {
extend: {
recipes
}
}
});Add components first with npx dreamy add button so the components/patterns and components/recipes index files exist.
Add Panda layers to src/index.css:
@layer reset, base, tokens, recipes, utilities;Make sure src/index.css is imported in src/main.tsx.
{
"scripts": {
"prepare": "panda codegen"
}
}{
"compilerOptions": {
"paths": {
"@/ui": ["./components/ui"]
}
},
"include": [
// ...
"styled-system/**/*"
]
}Create components/dreamy-provider.tsx:
import { DreamyProvider as BaseDreamyProvider } from "@dreamy-ui/react";
import domMax from "motion/react";
interface DreamyProviderProps {
children: React.ReactNode;
}
export function DreamyProvider({ children }: DreamyProviderProps) {
return <BaseDreamyProvider motionFeatures={domMax}>{children}</BaseDreamyProvider>;
}Wrap your app in src/main.tsx:
import { DreamyProvider } from "../components/dreamy-provider";
ReactDOM.createRoot(document.getElementById("root")!).render(
<DreamyProvider>
<App />
</DreamyProvider>
);pnpm dlx dreamy add button flex text headingimport { Button } from "@/ui";
function App() {
return <Button>Dreamy UI!</Button>;
}
export default App;