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) - Remove the default Tailwind CSS setup (
app/app.cssand its import) - Set up
app/app.csswith Panda layers and import it inapp/root.tsx - Update
tsconfig.json— addstyled-system/**/*toincludeand an@/uipath alias - Create a
components/dreamy-provider.tsxwrapper component - Wire up
DreamyProviderinapp/root.tsxwith SSR color mode - 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: ["./app/**/*.{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.
Create or update app/app.css:
@layer reset, base, tokens, recipes, utilities;Import it at the top of app/root.tsx:
import "./app.css";{
"scripts": {
"prepare": "panda codegen"
}
}{
"compilerOptions": {
"paths": {
"@/ui": ["./components/ui"]
}
},
"include": [
// ...
"styled-system/**/*"
]
}Create components/dreamy-provider.tsx:
"use client";
import { DreamyProvider as BaseDreamyProvider, type ColorMode } from "@dreamy-ui/react";
import { getColorModeHTMLProps, getSSRColorMode } from "@dreamy-ui/react/rsc";
const domMax = () => import("motion/react").then((mod) => mod.domMax);
interface DreamyProviderProps {
children: React.ReactNode;
colorMode?: ColorMode;
}
export function DreamyProvider({ children, colorMode }: DreamyProviderProps) {
return (
<BaseDreamyProvider
motionFeatures={domMax}
colorMode={colorMode}
motionStrict
useUserPreferenceColorMode
>
{children}
</BaseDreamyProvider>
);
}
export { getColorModeHTMLProps, getSSRColorMode };Wire it up in app/root.tsx with SSR color mode (Framework mode):
import { DreamyProvider, getColorModeHTMLProps, getSSRColorMode } from "../components/dreamy-provider";
import type { Route } from "./+types/root";
import { useRouteLoaderData } from "react-router";
export function loader({ request }: Route.LoaderArgs) {
return { colorMode: getSSRColorMode(request) };
}
export function Layout({ children }: { children: React.ReactNode }) {
const { colorMode } = useRouteLoaderData<Route.ComponentProps["loaderData"]>("root") ?? {};
return (
<html lang="en" {...getColorModeHTMLProps(colorMode)}>
{/* ... */}
<body>
<DreamyProvider colorMode={colorMode}>{children}</DreamyProvider>
{/* ... */}
</body>
</html>
);
}pnpm dlx dreamy add button flex text headingimport { Button } from "@/ui";
export default function Index() {
return <Button>Hello World</Button>;
}