Dreamy UI depends on pandaCSS as build-time css-in-js styling engine. That means every customization related to styling should be done in panda config.

Dream Preset contains only most basic styling options like background color, fonts, etc. If you want to customize more, you can extend the theme in panda config.

Most basic panda config would look like this. You can extend any theme property you want in theme.extend object.

export default defineConfig({
    preflight: true,
    jsxFramework: "react",
    jsxStyleProps: "all",
    outExtension: "js",
    include: [
        "./app/**/*.{js,jsx,ts,tsx}",
    ],
    importMap: "@dreamy-ui/system",
    presets: [
        pandaPreset,
        createDreamPreset()
    ],
    theme: {
        extend: {
			/**
			 * Extend theme properties here
			*/
        }
    } 
})

Every component in Dreamy UI has it's own recipe/slot recipe. Dreamy UI adds components to your project via CLI. That means you can go into recipes or patterns folder and manually edit the theme to your liking.

Do not forget to generate panda styled-system after changing the recipe or pattern.

npm panda codegen

pnpm panda codegen

yarn panda codegen

bun panda codegen