---
title: Interpolation
description: "Yamada UI provides a feature for easily accessing CSS custom properties (variables) or tokens from the theme."
---

## Overview

Interpolation is a feature for referencing [CSS custom properties (variables)](https://yamada-ui.com/docs/styling/css-custom-properties.md) or tokens from the [theme](https://yamada-ui.com/docs/theming.md).

## Usage

You can reference the property name set with [CSS custom properties (variables)](https://yamada-ui.com/docs/styling/css-custom-properties.md) using `{custom-property-name}`.

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

### Reference Theme Tokens

Yamada UI [Style Props](https://yamada-ui.com/docs/styling/style-props.md) only reference the corresponding tokens from the [theme](https://yamada-ui.com/docs/theming.md). For example, `borderRadius` references tokens from `radii`, but not from `spaces`. By using `{}`, you can reference tokens outside of the corresponding ones.

```tsx
<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](https://yamada-ui.com/docs/theming.md). This is useful for [shorthand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) such as [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border).

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