Elevation
Shadow and elevation tokens with light/dark previews.
Overview
Elevation conveys hierarchy through five shadow levels — xs, sm, md, lg, xl. Each level
is tuned per theme: light shadows use a soft cool-gray tint, while dark shadows use pure black
at the same opacities so depth reads correctly on dark surfaces.
Token Contract
Each level is defined as a base variable and surfaced as a Tailwind shadow utility:
- Variable:
--base-shadow-xs…--base-shadow-xl(theme-specific values in:rootand.dark). - Utility:
shadow-xs…shadow-xl(Tailwind v4 maps--shadow-*→var(--base-shadow-*)).
The dark-theme values are swapped automatically under the .dark class — no dark: variants needed.
Preview
Toggle the theme to compare light and dark elevation.
Extra Small
Subtle lift: inputs, chips, flat cards.
Small
Resting cards and list items.
Medium
Dropdowns, menus, hovered cards.
Large
Popovers, floating panels.
Extra Large
Modals, dialogs, the highest surfaces.
Usage
Apply elevation with the Tailwind utility:
<div className="rounded-xl bg-card shadow-md">Menu</div>
<div className="rounded-xl bg-card shadow-xl">Modal</div>All five levels ship — light and dark — in the Morpha theme. Install it with the CLI:
npx morpha-ui@latest add themepnpm dlx morpha-ui@latest add themebunx --bun morpha-ui@latest add theme