Using React Router

#

Using Dreamy UI with React Router

Set up Dreamy UI in your React Router project.

#

1. Follow the Panda CSS installation guide

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

#

2. Install Dreamy UI

Install Dreamy UI in your project:

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

#

2. Configure panda.config.ts

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

import { defineConfig } from "@pandacss/dev";
import { createDreamPreset } from "@dreamy-ui/system";
import pandaPreset from "@pandacss/preset-panda";
 
export default defineConfig({
	...,
	preflight: true,
    jsxFramework: "react",
    jsxStyleProps: "all",
    outExtension: "js",
    importMap: "@dreamy-ui/system",
    presets: [
        pandaPreset,
        createDreamPreset()
    ]
});

#

3. Add Dreamy Provider

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

(Optional, only for Framework mode) 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 "@React Router-run/node";
 
// Loaders only work for Framework mode,
// you can skip this, if you are using React Router as library mode.
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>
    );
}
 
...

#

4. Start using Dreamy UI

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>;
}