Interpolation

Overview

Interpolation is a feature for referencing CSS custom properties (variables) or tokens from the theme.

Usage

You can reference the property name set with CSS custom properties (variables) using {custom-property-name}.

<Box p="md" {...{ "--custom-bg-color": "#1ba14c" }} bg="{custom-bg-color}">
  Box
</Box>

Reference Theme Tokens

Yamada UI Style Props only reference the corresponding tokens from the theme. For example, borderRadius references tokens from radii, but not from spaces. By using {}, you can reference tokens outside of the corresponding ones.

<VStack>
  <Box p="md" rounded="l2" borderWidth="1px">
    Box
  </Box>

  <Box p="md" rounded="{spaces.md}" borderWidth="1px">
    Box
  </Box>
</VStack>

Additionally, by using {} within strings, you can reference tokens from the theme. This is useful for shorthand properties such as border.

<Box p="md" border="{sizes.1} solid {colors.success}">
  Box
</Box>