Shadow Component

index

4

status

Draft

The Shadow component creates box shadows with support for explosion separation and interactive variants.

Basic Usage

<Shadow 
  elevation={-1} 
  offsetX={0} 
  offsetY="4px" 
  blur="8px" 
  color="rgba(0,0,0,0.2)" 
/>

Props

• color – Shadow color
• opacity – Shadow opacity (0-1)
• blur – Blur radius
• offsetX, offsetY – Shadow offset
• spread – Shadow spread radius
• inset – Whether shadow is inset (boolean)
• elevation – Z-index stacking order
• variants – State-specific property overrides

Inset Shadows

<Shadow 
  inset={true}
  offsetY="1px" 
  blur="2px" 
  color="rgba(255,255,255,0.5)" 
  elevation={1} 
/>

Dynamic Shadows

Shadows can change based on interactive state:

<Shadow 
  elevation={-1}
  variants={{
    default: {
      offsetY: "2px",
      blur: "4px",
      opacity: 0.2
    },
    hover: {
      offsetY: "4px", 
      blur: "8px",
      opacity: 0.3
    },
    pressed: {
      offsetY: "1px",
      blur: "2px", 
      opacity: 0.1
    }
  }}
/>