
<Theme colorMode="light">
  <View backgroundColor="neutral-faded" padding={8} borderRadius="large" width="300px">
    <Card elevated>
      <View gap={2} direction="row" align="center">
        <Avatar initials="R" color="primary" />
        <View.Item grow>
          <Text variant="body-3" weight="bold">Reshaped</Text>
          <Text color="neutral-faded">10,873 followers</Text>
        </View.Item>
      </View>
    </Card>
  </View>
</Theme>

Reshaped supports two shadow tokens that demonstrate the level of component elevation.

--rs-shadow-raised
--rs-shadow-overlay

/* Usage */
.element {
  box-shadow: var(--rs-shadow-raised);
}

Raised shadow is used to elevate elements that initially don't have any elevation, for example, an elevated Card.
Overlay shadow is used for elements displayed on top of other elements, like in a DropdownMenu.

Shadows are usually used with background-elevation-raised and background-elevation-overlay color tokens. Since shadows are less prominent in dark mode, these color tokens adjust the element's background color to communicate elevation to the user.


<View direction="row" gap={4}>
  <Theme colorMode="light">
    <View backgroundColor="neutral-faded" padding={8} borderRadius="large" direction="row" gap={3}>
      <div
        style={{
          backgroundColor: "var(--rs-color-background-elevation-raised)",
          border: "1px solid var(--rs-color-border-neutral-faded)",
          borderRadius: "var(--rs-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--rs-shadow-raised)",
        }}
      />
      <div
        style={{
          backgroundColor: "var(--rs-color-background-elevation-overlay)",
          border: "1px solid var(--rs-color-border-neutral-faded)",
          borderRadius: "var(--rs-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--rs-shadow-overlay)",
        }}
      />
    </View>
  </Theme>
  <Theme colorMode="dark">
    <View backgroundColor="neutral-faded" padding={8} borderRadius="large" direction="row" gap={3}>
      <div
        style={{
          backgroundColor: "var(--rs-color-background-elevation-raised)",
          border: "1px solid var(--rs-color-border-neutral-faded)",
          borderRadius: "var(--rs-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--rs-shadow-raised)",
        }}
      />
      <div
        style={{
          backgroundColor: "var(--rs-color-background-elevation-overlay)",
          border: "1px solid var(--rs-color-border-neutral-faded)",
          borderRadius: "var(--rs-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--rs-shadow-overlay)",
        }}
      />
    </View>
  </Theme>
</View>

Radius

Viewport