Scrim directs user attention to its content and away from the surface receiving a scrim.


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

With its position, you can control the side where you want to render the content.

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


childrenReactNode-falseScrim content
backgroundSlotReactNode-falseBackground content
positiontop, bottom, start, end, covercoverfalse
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element