Use the automated CLI to set up Dreamy UI in your project:
pnpm dlx @dreamy-ui/cli initThe CLI will automatically:
- Detect your framework (TanStack Start, React Router v7, Next.js, 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) - Replace
src/styles.csswith Panda layers (CSS stays linked via?urlin__root.tsx) - Update
tsconfig.json— addstyled-system/**/*toincludeand an@/uipath alias - Create a
components/dreamy-provider.tsxwrapper component - Wire up
DreamyProviderinsrc/routes/__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 and remove @tailwindcss/vite if present:
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.
Replace src/styles.css with:
@layer reset, base, tokens, recipes, utilities;Keep the existing ?url import in src/routes/__root.tsx so the stylesheet is linked in <head>:
import appCss from "../styles.css?url";
export const Route = createRootRoute({
head: () => ({
links: [{ rel: "stylesheet", href: appCss }]
})
// ...
});{
"scripts": {
"prepare": "panda codegen"
}
}{
"compilerOptions": {
"paths": {
"@/ui": ["./components/ui/index"]
}
},
"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 src/routes/__root.tsx with SSR color mode:
import { DreamyProvider, getColorModeHTMLProps, getSSRColorMode } from "../../components/dreamy-provider";
import { createServerFn } from "@tanstack/react-start";
import { getRequest } from "@tanstack/react-start/server";
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
import appCss from "../styles.css?url";
const getColorMode = createServerFn({ method: "GET" }).handler(async () => {
return getSSRColorMode(getRequest());
});
export const Route = createRootRoute({
beforeLoad: async () => {
const colorMode = await getColorMode();
return { colorMode };
},
head: () => ({
links: [{ rel: "stylesheet", href: appCss }]
}),
shellComponent: RootDocument
});
function RootDocument({ children }: { children: React.ReactNode }) {
const { colorMode } = Route.useRouteContext();
return (
<html lang="en" {...getColorModeHTMLProps(colorMode)}>
<head>
<HeadContent />
</head>
<body>
<DreamyProvider colorMode={colorMode}>{children}</DreamyProvider>
<Scripts />
</body>
</html>
);
}pnpm dlx dreamy add button flex text headingimport { Button } from "@/ui";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
component: Home
});
function Home() {
return <Button variant="primary">Hello World</Button>;
}