# CSS Variables

A reference table of the CSS variables a component reads, from the page’s front matter.

A CSS variables table lists the variables a component reads, with their defaults. The rows live in the page’s front matter, where tools can read them as data.

::css-variables
::

## Usage

List the variables under `cssVariables`, then place the table.

```mdc
---
cssVariables:
  - variable: --magic-drawer-height
    default: 75svh
    part: MagicDrawerContent
    description: The height of the drawer.
---

::css-variables
::
```

With `part`, the table lists only the variables of that part.

```mdc
::css-variables{part="MagicDrawerBackdrop"}
::
```