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/panda-preset motion

#

2. Configure panda.config.ts

Configure environment and panda presets in your panda.config.ts file:

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

#

3. Add styled-system alias to tsconfig.json and vite.config.ts

Add the following alias to your tsconfig.json file:

{
	"include": [
		...
		"styled-system/*"
	],
	...
}

#

4. 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>
);

#

5. 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;

Remix

Customization