Using Vite - Dreamy UI

#

Using Dreamy UI with Vite

Set up Dreamy UI in your Vite project.

#

1. Follow the Panda CSS installation guide

Follow the Panda CSS installation guide to set up Panda CSS in your Vite 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 root:

...
import { DreamyProvider } from "@dreamy-ui/react";
import { domMax } from "motion/react";
 
ReactDOM.createRoot(document.getElementById("root")).render(
    <DreamyProvider
        motionFeatures={domMax}
        motionStrict
        useUserPreferenceColorMode
    >
        <App />
    </DreamyProvider>
);

#

4. Start using Dreamy UI

Now you can start using Dreamy UI in your src/App.tsx.

import { Button } from "@dreamy-ui/react";
 
function App() {
    return <Button>Dreamy UI!</Button>;
}
 
export default App;