Profile My skills Saved Collections Edit profile Submit a skill

Backdrop

Backdrop

reaviz 24b7a45 954 B Updated
Coding & Dev Tools

File contents

Backdrop

Animated overlay backdrop for modals, dialogs, and drawers. Fades in/out with Framer Motion. Typically used internally by Dialog and Drawer.

Import

import { Backdrop } from 'reablocks';

Backdrop Props

Prop Type Default Description
zIndex number 998 CSS z-index
portalIndex number 0 Portal nesting index (reduces opacity for stacked backdrops)
className string — Additional CSS classes
onClick (event: MouseEvent) => void — Click handler (used for close-on-backdrop-click)
theme BackdropTheme — Per-instance theme override

BackdropTheme Interface

interface BackdropTheme {
  base: string;    // Fixed full-screen overlay (fixed, top-0, left-0, w-full, h-full, bg-black)
  opacity: number; // Target opacity (default: 0.8)
}

reaviz/skills/tree/main/reablocks/layers/backdrop commit 24b7a450e7

Browse category

Frequently asked questions

npx skillmds@latest add reaviz/backdrop