Components
Scrim
The wash behind an overlay.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/scrim.jsonWhy it is a component
So every overlay dims by the same amount. Modal and the command palette each
inlined their own color-mix before this existed, which is how two overlays in
one product end up at different opacities — and nobody notices until they are
seen back to back.
It is a positioned layer as well as a colour: fixed inset-0 at z-100, so the
consumer only supplies how its children are laid out inside it.
| Prop | Type | Default | Description |
|---|---|---|---|
| onClick | () => void | — | Usually dismissal. Omit for overlays that must not be dismissed by a stray click. |
| className | string | — | Layout for the children — grid place-items-center, flex items-start, and so on. |