Shadows
Shadows
Shadows communicate elevation: the farther an element sits from the page, the larger its shadow. Hulian UI follows the Tailwind shadow-* scale.
Elevation scale
Shadows are easiest to inspect on a light surface and naturally recede in dark mode.
xsSubtle lift: inputs and badges
smCards and primary buttons
mdFloating cards and menus
lgPopovers
xlDialogs and drawers
2xlCommand palettes and large modals
Usage
// Use sm for cards, lg for popovers, and xl for dialogs
<div className="rounded-[var(--radius)] bg-surface shadow-sm">…</div>