Foundations

Named layers

Eight stacking layers, lowest first. A component asks for a layer by name, so a new overlay never has to guess a number.

The stack

Added through extend: z-modal and z-tooltip exist, and the numeric z-10 family keeps working for local stacking inside a component.

z-raised10

A card lifted over its siblings

z-sticky20

Sticky table heads, section bars

z-header30

The app header and toolbar

z-overlay40

The scrim behind a dialog or drawer

z-modal50

Dialogs, sheets, drawers

z-popover60

Menus, selects, popovers — open from inside a modal

z-toast70

Notifications over everything interactive

z-tooltip80

Tooltips, over toasts too

Popover sits above modal

A select inside a dialog must open over the dialog. That is why popover is 60 and modal 50, the reverse of what the names suggest.

No z-[9999]

An arbitrary large number wins today and loses to the next one. If no layer fits, the stack is missing a layer — add it to the tokens package.