Dreamy UI ships a Panda CSS preset with tokens, semantic tokens, patterns, recipes, and utilities that components rely on for styling.

Tokens give you a type-safe way to use CSS values so your app stays consistent and easy to theme.

Use the breakpoints key in the theme section of your Panda config to customize breakpoints.

import { defineConfig } from "@pandacss/dev";
 
export default defineConfig({
    theme: {
        extend: {
            breakpoints: {
                "3xl": "1800px"
            }
        }
    }
});

Dreamy UI ships with these breakpoints by default:

Use the colors key in the tokens section of your Panda config to customize color values.

import { defineConfig } from "@pandacss/dev";
 
export default defineConfig({
    theme: {
        extend: {
            tokens: {
                colors: {
                    tertiary: { value: "#fbb36a" }
                }
            }
        }
    }
});

Color palettes

Click a swatch to copy its value.

Semantic colors

Semantic colors adapt to light and dark mode. Prefer these for UI surfaces, text, actions, and status.

Most semantic colors are generated from your preset options — for example primary / secondary, bg, fg, border, and alpha are derived from primaryColor, secondaryColor, backgrounds, and related settings in createDreamyPreset. Change those options and the semantic palette updates with them.

Use the spacing key to customize spacing values.

import { defineConfig } from "@pandacss/dev";
 
export default defineConfig({
    theme: {
        extend: {
            tokens: {
                spacing: {
                    gutter: { value: "32px" }
                }
            }
        }
    }
});

Dreamy UI ships with these spacing tokens by default:

Use the radii key to customize border radius values. Semantic radii (l1, l2, l3, p-*) are generated from the rounded option in createDreamyPreset.

import createDreamyPreset from "@dreamy-ui/panda-preset";
 
createDreamyPreset({
    rounded: "lg"
});

Use the shadows key to customize box shadows. Shadows are semantic tokens that adapt to color mode.

Use the sizes key to customize sizing values. Size tokens include spacing values plus larger container sizes.

import { defineConfig } from "@pandacss/dev";
 
export default defineConfig({
    theme: {
        extend: {
            tokens: {
                sizes: {
                    icon: { value: "24px" }
                }
            }
        }
    }
});

Dreamy UI ships with these sizing tokens (in addition to spacing values):

Use the fonts key to customize font families. body, heading, and mono are configured via createDreamyPreset.

import createDreamyPreset from "@dreamy-ui/panda-preset";
 
createDreamyPreset({
    fonts: {
        body: "Geist",
        heading: "Manrope",
        mono: "JetBrains Mono"
    }
});

Prefer size or textStyle for typography instead of only fontSize. Those properties apply the correct font size, line height, and responsive sizes.

<Text size="sm">Small text</Text>
<Text size="md">Medium text</Text>
<Text size="lg">Large text</Text>

Use the keyframes key in the theme section to customize animations.

import { defineConfig } from "@pandacss/dev";
 
export default defineConfig({
    theme: {
        extend: {
            keyframes: {
                fadein: {
                    "0%": { opacity: "0" },
                    "100%": { opacity: "1" }
                }
            }
        }
    }
});

Dreamy UI ships with these keyframes by default:

Prefer semantic tokens over raw design tokens or hardcoded values. Semantic tokens (fg, bg, primary, border, l2, …) follow your theme and color mode, so a single change in createDreamyPreset updates the whole UI. Design tokens (blue.500, 4, md) and fixed CSS (#3B82F6, 16px) lock you to one look and break dark mode or rebrands.

<Flex
    bg="bg.panel"
    border="1px solid"
    borderColor="border"
    gap={4}
    p={4}
    rounded="l2"
>
    <Text color="fg">Account settings</Text>
    <Text color="fg.medium">Manage your profile and preferences.</Text>
    <Button variant="primary">Save changes</Button>
</Flex>

This stays correct when you switch light/dark mode or change primaryColor / backgrounds in the preset.

{/* Fragile: breaks in dark mode and ignores your brand */}
<Flex
    bg="#ffffff"
    border="1px solid #e5e7eb"
    gap="16px"
    p="16px"
    rounded="8px"
>
    <Text color="gray.900">Account settings</Text>
    <Text color="gray.500">Manage your profile and preferences.</Text>
    <Button bg="blue.500" color="white">
        Save changes
    </Button>
</Flex>

Hardcoded hex values and palette steps like blue.500 or gray.900 bypass the semantic layer. Reach for design tokens only when you need a one-off accent that is not part of the theme API.