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, or Vite)
- Install all required dependencies (Panda CSS + Dreamy UI)
- Create and configure
panda.config.ts - Update
vite.config.tsorpostcss.config.mjswith Panda CSS PostCSS plugin - Remove default Tailwind CSS (React Router v7 and Next.js only)
- Set up CSS files with proper imports
- Create a
DreamyProvidercomponent - Update your
tsconfig.jsonwith@/*path alias and styled-system (if using TypeScript) - Next.js also gets
styled-system/*path alias for proper type resolution - Run Panda CSS codegen to generate the styled-system
- Add recommended components (button, flex, text, heading) to get you started
- Prints out code to add to the root of your application
Follow the Panda CSS installation guide to set up Panda CSS in your Remix project.
Install Dreamy UI in your project:
pnpm install @dreamy-ui/react @dreamy-ui/panda-preset motionConfigure 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.tsx.
To fix color mode flashing on document request, we need to get color mode from the loader, to render the correct color mode.
...
import { DreamyProvider } from "@dreamy-ui/react";
import { getColorModeHTMLProps, getSSRColorMode } from "@dreamy-ui/react/rsc";
import type { LoaderFunctionArgs } from "@remix-run/node";
export function loader({ request }: LoaderFunctionArgs) {
return {
colorMode: getSSRColorMode(request)
};
}
const domMax = () => import("motion/react").then((mod) => mod.domMax);
export function Layout({ children }: { children: React.ReactNode }) {
const { colorMode } = useRouteLoaderData<typeof loader>("root") ?? {};
return (
<html
lang="en"
{...getColorModeHTMLProps(colorMode)}
>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<DreamyProvider
motionFeatures={domMax}
colorMode={colorMode}
motionStrict
useUserPreferenceColorMode
>
{children}
</DreamyProvider>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
...Let's write some Dreamy UI in app/routes/_index.tsx.
import { Button } from "@dreamy-ui/react";
export default function Index() {
return <Button>Hello World</Button>;
}