Components

Compare

Two stages side by side, each named by its condition. They stack when there is not enough room for both.

Two conditions

Stacked below 40rem

@media (width < 40rem)

@media (width ≥ 40rem)

Each stage is captioned with the condition it shows.

A complete scale

A scale of more than two values is a grid of labelled specimens on one stage.

shadow-xs

Quiet separation

Small controls, table rows, and subtle raised states.

shadow-sm

Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-md

Temporary lift

Hover lift, floating toolbars, and command surfaces.

shadow-lg

Detached overlay

Dropdowns, popovers, toasts, and menus.

shadow-xl

Workflow interruption

Drawers, dialogs, and focused panels.

shadow-2xl

Blocking layer

Modals and spotlight surfaces above a dimmed page.

shadow-inset

Sunken well

Inputs, tracks, pressed states, and recessed wells.

Used on the Colors guide.

Usage and interface

DemoComparison renders div.ui-compare with one figure per item: a figcaption naming the condition and a ui-stage holding the specimen. Put it in a tray with frame="none" so the stages sit directly in the tray.

<Demo title="Stacked below 40rem" frame="none">  <DemoComparison items={[    { label: '@media (width < 40rem)', children: <Stacked /> },    { label: '@media (width ≥ 40rem)', children: <Side /> },  ]} /></Demo>

<div class="ui-compare">  <figure><figcaption>@media (width &lt; 40rem)</figcaption><div class="ui-stage">…</div></figure>  <figure><figcaption>@media (width ≥ 40rem)</figcaption><div class="ui-stage">…</div></figure></div>

Two browsers compare the same way: DemoThemeComparison and DemoStyleComparison place a DemoViewport under each figcaption.