Primitives
Shadows
Seven elevation levels. Shadows use a single consistent light source at top-centre, matching how Untitled UI models physical depth.
Scale
xs
Subtle lift, input focus rings
sm
Buttons, small cards, chips
md
Dropdowns, popovers, select menus
lg
Cards, panels, date pickers
xl
Modals, side sheets
2xl
Prominent modals, command palettes
3xl
App-level overlays, full-screen sheets
Token reference
| Token | Typical usage |
|---|---|
--shadow-xs | Subtle lift, input focus rings |
--shadow-sm | Buttons, small cards, chips |
--shadow-md | Dropdowns, popovers, select menus |
--shadow-lg | Cards, panels, date pickers |
--shadow-xl | Modals, side sheets |
--shadow-2xl | Prominent modals, command palettes |
--shadow-3xl | App-level overlays, full-screen sheets |
Usage principles
Elevation implies interactivity and hierarchy. Higher shadows signal more modal or overlay-like behaviour. Don't stack shadows - pick one level per surface.