Elevation & Shadows

Shadows add depth and realism to designs, establishing a visual hierarchy.

None

shadow-none

No shadow

Small

shadow-sm

Small shadow

Default

shadow

Default shadow

Medium

shadow-md

Medium shadow

Large

shadow-lg

Large shadow

Extra Large

shadow-xl

Extra large shadow

2XL

shadow-2xl

2XL shadow

Inner

shadow-inner

Inner shadow

Usage Guidelines

Hierarchy: Use larger shadows for elements that should appear closer to the user, like modals or dropdowns. Smaller shadows are for buttons or cards.

Consistency: Maintain consistent elevation levels for similar components throughout the application.

Dark Mode: Shadows are often less visible in dark mode. Consider using borders or lighter background colors to differentiate layers.