Z-Index
Stacking tokens shipped with the Saas UI preset
Prefer the numbered layers for new UI. Named tokens (dropdown, modal,
tooltip, …) remain for Chakra recipes that already use them.
| Token | Value | Use |
|---|---|---|
layer-1 | 1 | Local chrome (avatar badge) |
layer-2 | 10 | Popovers, menus, tooltips |
layer-3 | 100 | Sticky chrome above the page |
layer-4 | 1000 | Dialogs and other escapes |
theme.tokens.zIndex
Name
Value
hide
-1
base
0
layer-1
1
layer-2
10
docked
10
layer-3
100
layer-4
1000
dropdown
1000
sticky
1100
banner
1200
overlay
1300
modal
1400
popover
1500
skipNav
1600
toast
1700
tooltip
1800
max
2147483647