Scrim

PreviewCode

Installation

npx shadcn@latest add @tetra-ui/scrim

Usage

Wrap the surface that should blur in ScrimHost and ScrimTarget. Render Scrim as a sibling of ScrimTarget, not inside it — Android blur needs the overlay outside the captured view.

import { Scrim, ScrimHost, ScrimTarget } from "@/components/ui/scrim";

<ScrimHost>
  <ScrimTarget>
    <Content />
  </ScrimTarget>
  <Scrim onPress={() => setOpen(false)} open={open} />
</ScrimHost>

Floating Action Button composes this inside FabHost. Popover uses PopoverScrim. ThemeProvider wraps the app in ScrimHost / ScrimTarget so portaled scrims can blur the screen.

API Reference

ScrimHost

Provides the blur target ref. Apply layout classes here (flex-1, relative).

ScrimTarget

The content that is captured for the blur. Must be a child of ScrimHost.

Scrim

The overlay. With open, it enters and leaves via Reanimated FadeIn / FadeOut. With visibilityProgress, blur intensity and dim opacity follow that shared value instead. Reduce Transparency disables the blur layer and keeps the dim.

Changelog

2026-09-18 - Motion and accessibility

Open/close uses FadeIn / FadeOut. visibilityProgress now drives blur intensity. Blur is skipped when Reduce Transparency is enabled.

2026-09-18 - Scrim

Added scrim as a reusable blurred overlay for menus and similar surfaces.