Set up Dreamy UI in your Remix project.
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>;
}