Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis. Each shadow level serves a specific purpose in creating visual hierarchy and guiding user attention.
Shadow Variants
Use these shadow classes to add depth to your components. Each shadow is carefully designed to work harmoniously with the design system.
shadow-system
System shadow for general UI elements
shadow-sm
Small shadow for subtle elevation
shadow-md
Medium shadow for cards and containers
shadow-lg
Large shadow for prominent elements
shadow-xl
Extra large shadow for modals and overlays
shadow-2xl
2X large shadow for dramatic elevation
shadow-3xl
3X large shadow for maximum depth
shadow-pop-up
Pop-up shadow for dropdowns and tooltips
Usage Examples
Examples of how shadows can be applied to different UI components.
Cards
Card with shadow-sm
Subtle elevation for basic cards
Card with shadow-md
Standard elevation for content cards
Card with shadow-lg
Prominent elevation for featured content
Buttons
Modals and Overlays
Modal Dialog
This modal uses shadow-xl for a prominent elevation effect that draws attention.
Code Examples
How to use shadow classes in your components.
shadow-system
<div className="shadow-system">
Content here
</div>shadow-sm
<div className="shadow-sm">
Content here
</div>shadow-md
<div className="shadow-md">
Content here
</div>shadow-lg
<div className="shadow-lg">
Content here
</div>shadow-xl
<div className="shadow-xl">
Content here
</div>shadow-2xl
<div className="shadow-2xl">
Content here
</div>shadow-3xl
<div className="shadow-3xl">
Content here
</div>shadow-pop-up
<div className="shadow-pop-up">
Content here
</div>