/
Getting Started
Design Tokens
Components
Utility components
Utility functions
Scrim
A dark, semi-transparent layer used to direct user attention to specific content.
Import
import { Scrim } from "reshaped";
import type { ScrimProps } from "reshaped";
import type { ScrimProps } from "reshaped";
Related components
Storybook
By default, Scrim covers the entire background area and centers its content.
Scrim content
<Scrim
backgroundSlot={
<Image
aspectRatio={16 / 9}
src="/img/examples/image-retina.webp"
width="100%"
/>
}
>
Scrim content
</Scrim>The position property allows you to control the side where the content is rendered.
Image title
<Scrim
position="bottom"
backgroundSlot={
<Image
aspectRatio={16 / 9}
src="/img/examples/image-retina.webp"
width="100%"
/>
}
>
<Text variant="featured-3" weight="bold">
Image title
</Text>
</Scrim>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>Control the content layout with the padding, paddingInline and paddingBlock and change the border radius with the borderRadius property.
Favorite
<Scrim
padding={4}
borderRadius="medium"
position="bottom"
backgroundSlot={
<Image
aspectRatio={16 / 9}
src="/img/examples/image-retina.webp"
width="100%"
/>
}
>
<Badge color="primary">Favorite</Badge>
</Scrim>Professionally crafted React & Figma components for building beautiful products or starting your own design system
Built with Reshaped in Amsterdam ❤️
Contact us·
© Reshaped 2026