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. You can customize any component by extending the theme in panda config.

Let's make the Flex component to have flexDirection: "column" by default. Flex uses a pattern, so we need to extends the patterns.

/**
 * ...
 * theme.extend
 */
patterns: {
	flex: {
		base: {
			flexDirection: "column"
		}
	}
}

Now let's make the Button component to have bg: "blue" by default in the solid variant. Button is a multi-part recipe, so we need to import buttonParts from @dreamy-ui/system.

import { parts } from "@dreamy-ui/system";
 
...
recipes: {
	button: {
		variants: { // variants allow us to have multiple variants
			variant: { // select `variant` property
				solid: parts.button({ // select `solid` part and extend `base` from `parts.button`
					base: {
						bg: "blue.500"
					}
				})
			}
		}
	}
}

Now the hardest and most complicated part: Customizing slot recipes. Slot recipes and recipes that have multiple JSX components that are exported for user to use.

Let's make the Field root gap to be 0.5 smaller than the default.

recipes: {
	field: {
		root: {
			gap: 1
		}
	}
}