API
Layout
Display, position, overflow, and stacking.
Where an element sits and how it clips. --display also carries the flex shorthands (flex-col, inline-flex-row) that set the direction with the display, so there is no separate direction utility.
--anchor-name and --position-anchor take states and breakpoints, so the anchor can move with interaction: put --anchor-name--hover: --block on every block of an editor, and a toolbar with --position: absolute; --position-anchor: --block follows the hovered one. --position-area places it: --position-area: block-start span-inline-end puts the toolbar above the block, aligned to its start. For finer placement write anchor() in plain CSS. The inset utilities take numbers and lengths only, so --top: anchor(bottom) computes to 0.
Reference
| Utility | Writes | Value | Tiers | Notes |
|---|---|---|---|---|
--aspect | aspect-ratio | any CSS value | breakpoints | works tier-only; --before-aspect / --after-aspect |
--display | display | keyword, plus flex shorthands that set the direction: flex-row, flex-row-reverse, flex-col, flex-col-reverse, inline-flex-row, inline-flex-row-reverse, inline-flex-col, inline-flex-col-reverse | breakpoints | --before-display / --after-display |
--object-fit | object-fit | keyword | — | |
--object-position | object-position | any CSS value | — | |
--overflow | overflow | keyword | — | |
--overflow-x | overflow-x | keyword | — | |
--overflow-y | overflow-y | keyword | — | |
--position | position | keyword | breakpoints | works tier-only; --before-position / --after-position |
--anchor-name | anchor-name | dashed ident (--toolbar), a list of them, or none | breakpoints, states | works tier-only |
--position-anchor | position-anchor | dashed ident naming an anchor, auto, none, or normal | breakpoints, states | works tier-only |
--position-area | position-area | one or two area keywords (block-start span-inline-end), or none | breakpoints, states | works tier-only |
--inset | inset | scale number or length | breakpoints | --before-inset / --after-inset |
--inset-x | inset-inline | scale number or length | breakpoints | --before-inset-x / --after-inset-x |
--inset-y | inset-block | scale number or length | breakpoints | --before-inset-y / --after-inset-y |
--top | inset-block-start | scale number or length | breakpoints | --before-top / --after-top |
--right | inset-inline-end | scale number or length | breakpoints | --before-right / --after-right |
--bottom | inset-block-end | scale number or length | breakpoints | --before-bottom / --after-bottom |
--left | inset-inline-start | scale number or length | breakpoints | --before-left / --after-left |
--visibility | visibility | keyword | — | --before-visibility / --after-visibility |
--z | z-index | any CSS value | — | --before-z / --after-z |
Examples
--top: 4; --left: 4
--top: 4; --right: 4
--bottom: 4; --left: 4
--bottom: 4; --right: 4
--position: absolute; --inset: 6
<div
style="
--position: relative;
--p: 6;
--w: 100%;
--h: 40;
--max-w: 96;
--bg: var(--color-muted);
--rounded: var(--radius-lg);
"
>
<span
data-ui="badge"
data-badge-variant="primary"
style="
--position: absolute;
--top: 4;
--left: 4;
"
>--top: 4; --left: 4</span
>
<span
data-ui="badge"
data-badge-variant="muted"
style="
--position: absolute;
--top: 4;
--right: 4;
"
>--top: 4; --right: 4</span
>
<span
data-ui="badge"
data-badge-variant="muted"
style="
--position: absolute;
--bottom: 4;
--left: 4;
"
>--bottom: 4; --left: 4</span
>
<span
data-ui="badge"
data-badge-variant="primary"
style="
--position: absolute;
--bottom: 4;
--right: 4;
"
>--bottom: 4; --right: 4</span
>
<div
data-ui="text-xs"
style="
--display: flex;
--position: absolute;
--items: center;
--justify: center;
--inset: 6;
--font-weight: strong;
--text: var(--color-muted-foreground);
--border-color: var(--color-border);
--border-width: 1px;
--border-style: dashed;
--rounded: var(--radius-md);
"
>
--position: absolute; --inset: 6
</div>
</div>Scrollable region one
Scrollable region two
Scrollable region three
Scrollable region four
Scrollable region five
Scrollable region six
--overflow: hidden
<div
style="
--display: grid;
--grid-cols: 2;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<div
style="
--display: flex-col;
--p: 4;
--gap: 2;
--h: 24;
--bg: var(--color-muted);
--rounded: var(--radius-md);
--overflow-x: clip;
--overflow-y: auto;
"
>
<p data-ui="text-sm">Scrollable region one</p>
<p data-ui="text-sm">Scrollable region two</p>
<p data-ui="text-sm">Scrollable region three</p>
<p data-ui="text-sm">Scrollable region four</p>
<p data-ui="text-sm">Scrollable region five</p>
<p data-ui="text-sm">Scrollable region six</p>
</div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
"
>--overflow-y: auto</span
>
</div>
<div
style="
--display: flex-col;
--gap: 2;
"
>
<div
style="
--display: flex-col;
--p: 4;
--gap: 2;
--h: 24;
--bg: var(--color-muted);
--rounded: var(--radius-md);
--overflow: hidden;
"
>
<p data-ui="text-sm">Scrollable region one</p>
<p data-ui="text-sm">Scrollable region two</p>
<p data-ui="text-sm">Scrollable region three</p>
<p data-ui="text-sm">Scrollable region four</p>
<p data-ui="text-sm">Scrollable region five</p>
<p data-ui="text-sm">Scrollable region six</p>
</div>
<span
data-ui="text-xs"
style="
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
"
>--overflow: hidden</span
>
</div>
</div>
--aspect: 1 · 1:1
--aspect: 16 / 9 · 16:9
--aspect: 2 / 3 · 2:3
<div
style="
--display: grid;
--items: start;
--grid-cols: 3;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<div
data-ui="text-xs"
style="
--display: flex;
--items: center;
--justify: center;
--p: 2;
--aspect: 1;
--font-weight: strong;
--text-align: center;
--text: var(--color-primary-foreground);
--bg: var(--color-primary);
--rounded: var(--radius-md);
"
>
--aspect: 1 · 1:1
</div>
<div
data-ui="text-xs"
style="
--display: flex;
--items: center;
--justify: center;
--p: 2;
--aspect: 16 / 9;
--font-weight: strong;
--text-align: center;
--text: var(--color-secondary-foreground);
--bg: var(--color-secondary);
--rounded: var(--radius-md);
"
>
--aspect: 16 / 9 · 16:9
</div>
<div
data-ui="text-xs"
style="
--display: flex;
--items: center;
--justify: center;
--p: 2;
--aspect: 2 / 3;
--font-weight: strong;
--text-align: center;
--text: var(--color-tertiary-foreground);
--bg: var(--color-tertiary);
--rounded: var(--radius-md);
"
>
--aspect: 2 / 3 · 2:3
</div>
</div>
<div
style="
--display: grid;
--grid-cols: 3;
--gap: 6;
--w: 100%;
--max-w: 96;
"
>
<figure
style="
--display: flex-col;
--gap: 2;
"
>
<img
src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=320&h=200&q=60"
width="320"
height="200"
loading="lazy"
alt="Savanna grass at dawn"
style="
--w: 100%;
--aspect: 1;
--bg: var(--color-muted);
--rounded: var(--radius-md);
--object-fit: cover;
"
/>
<figcaption
data-ui="text-xs"
style="
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
"
>
--object-fit: cover
</figcaption>
</figure>
<figure
style="
--display: flex-col;
--gap: 2;
"
>
<img
src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=320&h=200&q=60"
width="320"
height="200"
loading="lazy"
alt="Savanna grass at dawn"
style="
--w: 100%;
--aspect: 1;
--bg: var(--color-muted);
--rounded: var(--radius-md);
--object-fit: contain;
"
/>
<figcaption
data-ui="text-xs"
style="
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
"
>
--object-fit: contain
</figcaption>
</figure>
<figure
style="
--display: flex-col;
--gap: 2;
"
>
<img
src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=320&h=200&q=60"
width="320"
height="200"
loading="lazy"
alt="Savanna grass at dawn"
style="
--w: 100%;
--aspect: 1;
--bg: var(--color-muted);
--rounded: var(--radius-md);
--object-fit: fill;
"
/>
<figcaption
data-ui="text-xs"
style="
--font-weight: strong;
--text-align: center;
--text: var(--color-muted-foreground);
"
>
--object-fit: fill
</figcaption>
</figure>
</div>