---
title: Shadows
description: Cal.com's shadow system for depth and elevation
---

import { ShadowTable } from '@/components/ui/ShadowTable';

# Shadows

Our shadow system is designed to create visual hierarchy and depth in the interface. We provide specific shadows for different components and states, ensuring consistent interaction patterns across the application.

## Shadow Categories

### Component-Specific Shadows
- **Dropdown**: Used for dropdown menus and popovers
- **Button States**: Different shadows for default, hover, and active states
- **Brand Buttons**: Special shadows for brand-colored buttons

### State-Based Shadows
- **Rested State**: Default appearance
- **Hover State**: Enhanced depth when hovering
- **Active State**: Pressed appearance

## Usage Examples

### Dropdowns and Popovers
```tsx
<div className="shadow-dropdown">
  Dropdown Content
</div>
```

### Solid Gray Buttons
```tsx
<button className="shadow-solid-gray-rested hover:shadow-solid-gray-hover active:shadow-solid-gray-active">
  Solid Gray Button
</button>
```

### Outline Buttons
```tsx
<button className="shadow-outline-gray-rested hover:shadow-outline-gray-hover active:shadow-outline-gray-active">
  Outline Button
</button>
```

### Brand Buttons
```tsx
<button className="shadow-button-solid-brand-default hover:shadow-button-solid-brand-hover active:shadow-button-solid-brand-active">
  Brand Button
</button>
```

## Shadow Preview

Click on any shadow to copy its Tailwind class name. Each card demonstrates how the shadow appears when applied.

<ShadowTable />