Using Next.js - Dreamy UI

#

Using Dreamy UI with Next.js

Set up Dreamy UI in your Next.js project.

#

1. Follow the Panda CSS installation guide

Follow the Panda CSS installation guide to set up Panda CSS in your Next.js 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/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>
    );
}

#

4. Start using Dreamy UI

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