Backdrop

Name: Backdrop
Author: reaviz

ASecurity

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

4 stars
0 votes
0 copies
1 view
Added May 27, 2026

data-aitypescript

Works with

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill backdrop --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Backdrop?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-backdrop/badge)](https://www.skillsdirectory.com/skills/reaviz-backdrop)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# Backdrop

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

## Import

```tsx
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

```typescript
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)
}
```