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/panda-preset motion

#

2. Configure panda.config.ts

Configure 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: {}
	}
});

#

3. Add styled-system alias to tsconfig.json

Add the following alias to your tsconfig.json file:

{
	"include": [
		"**/*.ts",
		"**/*.tsx",
		"**/.server/**/*.ts",
		"**/.server/**/*.tsx",
		"**/.client/**/*.ts",
		"**/.client/**/*.tsx",
		"styled-system/*"
	],
	...
}

#

4. 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 { Route } from "./+types/root";
 
// Loaders only work for Framework mode,
// you can skip this, if you are using React Router as library mode.
export function loader({ request }: Route.LoaderArgs) {
    return {
        colorMode: getSSRColorMode(request)
    };
}
 
const domMax = () => import("motion/react").then((mod) => mod.domMax);
 
export function Layout({ children }: { children: React.ReactNode }) {
    const { colorMode } = useRouteLoaderData<Route.ComponentProps["loaderData"]>("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>
    );
}
 
...

#

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

Next.js

Remix