Overlay

A layer that dims and blurs the page behind a modal, a sheet or a busy state.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add overlay
Also works with shadcn: npx shadcn@latest add @ritla/overlay
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

overlay.tsx

import { Overlay } from "@/components/ui/overlay";<div className="relative">  …  <Overlay type="gradient" /></div>

Prop	Type	Default	Description
`type`	`"solid" \| "gradient" \| "transparent"`	`"solid"`	Figma's Type: a solid dim, a dim that deepens towards the bottom, or none (blur only).
`blur`	`boolean`	`true`	Figma's Background blur: blurs what is behind at `backdrop-blur-elevation-md`.
`fixed`	`boolean`	`false`	Covers the whole screen at `z-overlay` instead of the nearest positioned parent.

The layer is decorative: aria-hidden, and it takes no focus.
Dialog and Drawer draw their own and trap focus; if you build a custom layer, trap focus and close it with Esc.