CSS Custom Properties (Variables)

You can create and reference CSS custom properties (variables) with Style Props in Yamada UI.

Usage

Use the var from Style Props to create CSS custom properties (variables).

• name: The name of the custom property.
• token: The token to retrieve the value of the custom property.
• value: The value of the custom property.

var={[{ name: "bg", token: "colors", value: "primary" }]}

The above code will generate the following CSS:

.Box {
  --ui-bg: var(--ui-colors-primary);
}

To reference a custom property, use CSS's var or the style system's $ (interpolation).

<Box
  p="md"
  rounded="md"
  var={[
    { name: "bg", token: "colors", value: "primary" },
    { name: "color", token: "colors", value: "white" },
  ]}
  bg="var(--ui-bg)"
  color="$color"
>
  Box
</Box>