Overlay

Import
import { Overlay } from "reshaped";
import type { OverlayProps } from "reshaped";
Related components
Works with any content
Automatically stretches based on the background content


By default, Scrim covers the whole background area and centers its content.

<Scrim
  backgroundSlot={
    <View aspectRatio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" width="100%" />
    </View>
  }
>
  Scrim content
</Scrim>

With the position property, you can control the side at which you want to render the content.

<Scrim
  position="bottom"
  backgroundSlot={
    <View aspectRatio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" width="100%" />
    </View>
  }
>
  <Text variant="featured-3" weight="bold">
    Image title
  </Text>
</Scrim>

When used without backgroundSlot, Scrim will become absolute positioned and take the entire width and height of the parent element.

<View
  height="300px"
  backgroundColor="positive"
  borderRadius="large"
  overflow="hidden"
  attributes={{ style: { position: "relative" } }}
>
  <Scrim>Scrim content</Scrim>
</View>