Set up Dreamy UI in your Next.js project.
Follow the Panda CSS installation guide to set up Panda CSS in your Next.js project.
Install Dreamy UI in your project:
pnpm install @dreamy-ui/react @dreamy-ui/system motion @pandacss/preset-panda
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()
]
});
After configuring Panda CSS, finally we can add the main Dreamy Provider to your app/layout.tsx
.
First create a providers.tsx
file in app/providers.tsx
. This is where you will add all the providers you need for your app.
"use client";
import { type ColorMode, DreamyProvider } from "@dreamy-ui/react";
import { domMax } from "motion/react";
import type { PropsWithChildren } from "react";
interface ProvidersProps extends PropsWithChildren {
colorMode?: ColorMode;
}
export function Providers({ children, colorMode }: ProvidersProps) {
return (
<DreamyProvider
motionFeatures={domMax}
colorMode={colorMode}
motionStrict
useUserPreferenceColorMode
>
{children}
</DreamyProvider>
);
}
Next, add the Providers
component to your app/layout.tsx
file:
This way we pass the color mode to the Providers
component so initial document request will have the user color mode.
...
import { Providers } from "./providers";
import { getColorModeHTMLProps, getSSRColorMode } from "@dreamy-ui/react/rsc";
import { cookies } from "next/headers";
...
export default async function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
const colorMode = getSSRColorMode((await cookies()).toString());
return (
<html
lang="en"
suppressHydrationWarning
{...getColorModeHTMLProps(colorMode)}
>
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<Providers colorMode={colorMode}>{children}</Providers>
</body>
</html>
);
}
Let's write some Dreamy UI in app/page.tsx
.
import { Button } from "@dreamy-ui/react";
export default function Home() {
return <Button>Hello World</Button>;
}