Scrim

A dark, semi-transparent layer used to direct user attention to specific content.

Import

import { Scrim } from "reshaped";
import type { ScrimProps } from "reshaped";

Related components

Image

Storybook

Scrim stories

Usage

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

Scrim content

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

Position

The position property allows you to control the side where the content is rendered.

Image title

<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>

Slots

Without the backgroundSlot, Scrim becomes absolutely positioned and occupies the full width and height of the parent element.

Scrim content

<View
  height="300px"
  backgroundColor="positive"
  borderRadius="large"
  overflow="hidden"
  position="relative"
>
  <Scrim>Scrim content</Scrim>
</View>

Radio

Select