Components
Foundation
The elevation scale used by floating elements. The design system defines no custom shadow tokens — components consume the Tailwind v4 defaults below.
shadow-sm--shadow-sm0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)Subtle lift for small raised elements.
shadow-md--shadow-md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)The default for floating menus and popovers.
shadow-lg--shadow-lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)Stronger elevation for overlays and nested layers.
shadow-xl--shadow-xl0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)Highest elevation in use.
| Utility | Components |
|---|---|
shadow-sm | Bubble · Tabs · Sidebar |
shadow-md | Popover · Select · Dropdown Menu · Combobox · Context Menu · Menubar · Navigation Menu · Hover Card |
shadow-lg | Sheet · submenus (Dropdown, Context Menu, Menubar) |
shadow-xl | Chart (tooltip) |
Note: Card deliberately uses ring-1 ring-border instead of a shadow — elevation via shadow is reserved for floating elements.