To install Dreamy UI, go to your project directory and run the following command:
pnpm add @dreamy-ui/react @dreamy-ui/system motion @pandacss/dev @pandacss/preset-pandaInstall panda by following the panda CSS installation for your framework.
After installing, you should configure your panda config with Dream preset. Copy and paste the following code into your panda.config.ts file:
import { createDreamPreset } from "@dreamy-ui/system";
import { defineConfig } from "@pandacss/dev";
import pandaPreset from "@pandacss/preset-panda";
export default defineConfig({
preflight: true,
watch: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
importMap: "@dreamy-ui/system",
include: [
"./app/**/*.{js,jsx,ts,tsx}", // Replace with your app source directory
],
presets: [
pandaPreset,
createDreamPreset()
],
theme: {
extend: {}
},
globalCss: {
extend: {}
},
staticCss: {
extend: {}
}
});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";
export default function App() {
return (
<DreamyProvider>
<YourApp />
</DreamyProvider>
);
}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>
);
}