Shadows
Elevation tokens. They adapt automatically in dark mode.
Visual scale
xs
shadow-xs
--shadow-xs
Minimal lift
sm
shadow-sm
--shadow-sm
Cards, inputs
md
shadow-md
--shadow-md
Dropdowns, popovers
lg
shadow-lg
--shadow-lg
Modals, toasts
xl
shadow-xl
--shadow-xl
Stacked dialogs
Usage by component
| Component | Shadow | Preview |
|---|---|---|
| Card | shadow-sm | |
| Dropdown | shadow-md | |
| Toast | shadow-lg | |
| Dialog | shadow-xl | |
| Tooltip | shadow-md |
Focus ring
The shadow-ring token creates an accessible focus ring.
var(--shadow-ring)