Gotchas

#

In this document we'll list some gotchas about how to use Dreamy UI.

#

Using tokens

#

Typography

Use size or textStyle for typography instead of only fontSize. These properties will apply the correct font size, line height and font weight, including responsive sizes.

Small text

Medium text

Large text

Small text

Medium text

Large text

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

Main colors for foreground are fg, fg.max, fg.medium and fg.disabled. Use these tokens for typography.

Main text

Max text

Secondary text

Disabled text

<Text color="fg">Main text</Text>
<Text color="fg.max">Max text</Text>
<Text color="fg.medium">Secondary text</Text>
<Text color="fg.disabled">Disabled text</Text>

#

Background colors

Background colors are bg, which will be the current background color. bg.light and bg.dark are the light and dark background colors.

Current Background

Light background

Dark background

<Box bg="bg">Current Background</Box>
<Box bg="bg.light">Light background</Box>
<Box bg="bg.dark">Dark background</Box>

#

Action colors

Main action colors are primary and secondary. Use these colors for buttons, links, etc.

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>

Dreamy exports a success, warning, error and info semantic tokens to easily signalize the status of an action.

Success

Warning

Error

Info

<Box bg="success">Success</Box>
<Box bg="warning">Warning</Box>
<Box bg="error">Error</Box>
<Box bg="info">Info</Box>

#

Alphas

Alphas are easy way to create a slightly transparent color. These colors will be black alphas for light color mode and white alphas for dark.

Alpha 50

Alpha 100

Alpha 150

Alpha 200

Alpha 300

Alpha 400

Alpha 500

Alpha 600

Alpha 700

Alpha 800

Alpha 900

<Box bg="alpha.50">Alpha 50</Box>
<Box bg="alpha.100">Alpha 100</Box>
<Box bg="alpha.150">Alpha 150</Box>
<Box bg="alpha.200">Alpha 200</Box>
<Box bg="alpha.300">Alpha 300</Box>
<Box bg="alpha.400">Alpha 400</Box>
<Box bg="alpha.500">Alpha 500</Box>
<Box bg="alpha.600">Alpha 600</Box>
<Box bg="alpha.700">Alpha 700</Box>
<Box bg="alpha.800">Alpha 800</Box>
<Box bg="alpha.900">Alpha 900</Box>

#

Other tokens

Using other radii, blur, shadows, etc.

When building your app, use tokens for consistency.

<Box rounded="lg">Rounded box</Box>
<Box blur="sm">Blurred box</Box>
<Box shadow="lg">Shadowed box</Box>
<Box transition="ease-in-out {durations.fast}">Fast transition</Box>

For more information visit Panda CSS docs , since Dreamy UI extends Panda CSS default preset.

#

Lazy loading

Dreamy UI can be used with a lazily loaded motion/react. If your bundler supports lazy loading, you can import motion/react like this:

const domMax = () => import("motion/react").then((mod) => mod.domMax);
...
<DreamyProvider motionFeatures={domMax}>
    {children}
</DreamyProvider>

#

Fastest way to center a div

Dreamy UI provides various utilities to use, like center, which is a alignItems="center" and justifyContent="center".

Centered

<Flex 
    center 
    h="100px" 
    p={4} 
    bg={{
        base: "bg.dark",
        _dark: "bg.light"
    }}
    color="bg"
    rounded="l1"
>
    <Text>Centered</Text>
</Flex>

#

Making Forms

The best practice is to use <Field /> component to wrap your form elements with nice label, help text and error message.

Name

Enter your preferred name

<Field name="name" isRequired>
    <FieldLabel>Name</FieldLabel>
    <Input />
    <FieldHelpText>
        Enter your preferred name
    </FieldHelpText>
    <FieldError>
        Name cannot be empty
    </FieldError>
</Field>