Elevation
Elevation sets the edge and the shadow of each surface, the order in which overlays stack, and the tint that marks hover and selection.
Surfaces
A surface in the page has an edge and no shadow. A surface that floats over the page also has a shadow, except for a Dialog, an Alert Dialog, a docked Drawer, and a Tooltip.
| Edge | Shadow | Purpose |
|---|---|---|
ring-1 ring-foreground/10 | None | A Card, and a Dialog or an Alert Dialog on its scrim |
ring-1 ring-foreground/10 | shadow-md | A Popover, a Hover Card, a Dropdown Menu, a Context Menu, and the list of a Select or a Combobox |
ring-1 ring-foreground/10 | shadow-lg | A submenu, and a Sheet or a Drawer with floating |
border | shadow-lg | A toast and a docked Sheet |
border | None | A docked Drawer, on its open edge |
A Tooltip has neither an edge nor a shadow. It is filled with foreground, the reverse of the page.
A Dialog, an Alert Dialog, a Sheet, and a Drawer dim the page behind them with black at 20% and no blur.
Stacking
Overlays built on Base UI have a z-index of 50 and render in a portal that Base UI appends to body when the overlay opens. Layers with the same z-index are painted in document order, so the overlay that was opened last is on top.
| Layer | z-index | Position |
|---|---|---|
| A Sidebar | 10 | Under every overlay |
| A scrim | 50 | Under its Dialog, Sheet, or Drawer, which follows it in the portal |
| A Dialog, an Alert Dialog, a Sheet, and a Drawer | 50 | Over its scrim |
| A Popover, a menu, the list of a Select or a Combobox, a Hover Card, and a Tooltip | 50 | Over the overlay it was opened from |
| A toast from Sonner | 999999999 | Over every other layer, a scrim included |
Tints and Marks
Hover is a tint. A selection is a tint and a mark, or a mark alone.
| INV-2026-014 | Atelier Brume | |
| INV-2026-015 | Studio Lumen |
| State | Tint | Mark |
|---|---|---|
| Hover on a Toggle or the trigger of a Navigation Menu | muted | None |
| Hover on a Table row | muted at 50% | None |
| The highlighted row of a menu, a Select, a Combobox, or a Command list | secondary | A 2px line in ring at the row’s start edge |
| A pressed Toggle | muted | The fill weight of its icon, or bold on a glyph |
| A selected Table row | muted | The checked Checkbox in the row |
| A checked item in a menu, and the selected option of a Select | None | A check at the row’s end |
| The selected option of a Segmented Control, and the active tab | None | An indicator in background with shadow-sm, on a muted track |
In a menu and a Select, the line is shown on a row when users reach it with the keyboard. In a Combobox and a Command list, focus stays in the input, so the line is always shown on the highlighted row. See Color for the reason the row is filled with secondary.
Rules
Shadows
Raise only a surface that floats. A Card stays in the page, so it has the ring and no shadow.
Edges
In dark, a shadow doesn’t show. Keep the ring or a border on any surface that has a shadow.
Selection Marks
A tint is too faint to be the only sign of a state, so add a second sign to a pressed Toggle. Use the fill weight for an icon, bold for a glyph such as B, and a leading check for a Toggle with only a label. See Iconography for the two weights.
Z-Index
Avoid setting a z-index on an overlay. For example, a Dialog raised to 100 covers the list of a Select opened inside it, which stays at 50.
Accessibility
The sign of a state needs a contrast of 3 to 1. No tint reaches it, so a selection always has a mark. See Accessibility for the floors for focus and contrast and for forced colors.
In Code
If you build a floating surface outside the registry, use the classes of a Popover.
<div className="rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden">
Sent three days before an invoice is due.
</div>