Installation - Dreamy UI

#

Install Dreamy UI

If you are using one of the following frameworks, please follow the corresponding guide:

#

1. Follow panda CSS installation steps

Install panda by following the panda CSS installation for your framework.

#

2. Install Dreamy UI

pnpm add @dreamy-ui/react @dreamy-ui/panda-preset motion

#

3. Add Dream preset

After installing, you should configure your panda config with Dream preset. Copy and paste the following code into your panda.config.ts file:

import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
 
export default defineConfig({
	preflight: true,
    watch: true,
    jsxFramework: "react",
    jsxStyleProps: "all",
    outExtension: "js",
	include: [
		"./app/**/*.{js,jsx,ts,tsx}", // Replace with your app source directory
	],
	presets: [
        createDreamyPreset()
    ],
    plugins: [dreamyPlugin],
	theme: {
		extend: {}
	},
	globalCss: {
		extend: {}
	},
	staticCss: {
		extend: {}
	}
});

#

4. Add Dream Provider

Add DreamyProvider to the root of your app. It is a wrapper for your app, which provides Dreamy UI with all the necessary context.

import { DreamyProvider } from "@dreamy-ui/react";
import domMax from "motion/react";
 
export default function App() {
	return (
		<DreamyProvider motionFeatures={domMax}>
			<YourApp />
		</DreamyProvider>
	);
}

#

5. Try and see Dream in action

Create a new component and use some Dreamy UI components!

import { Button } from "@dreamy-ui/react";
 
export default function Index() {
	return (
		<Button variant="primary">
			I am a Dream Button 🚀
		</Button>
	);
}

Introduction

Llms