Shadow Props

Shadow props control box and text shadows using theme-aware values.

Available Props

Prop	CSS Property	Theme Key
boxShadow	box-shadow	shadows
textShadow	text-shadow	shadows

Theme Scale

{
  shadows: {
    sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
    none: 'none',
  }
}

Usage

<Box
  boxShadow="lg"
/>

// Text shadow
<Text
  textShadow="sm"
  color="white"
>
  Shadowed text
</Text>