Layers

Name: Layers
Author: reaviz

ASecurity

Overlay, modal, and popup components that render above the main content. Built on Floating UI for positioning and Framer Motion for animations. Most use focus trapping and backdrop support.

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

data-ai

Works with

cursor
cli

Security analysis

A100/100

Pro scans all 11 files and shows the line behind each finding

Scanned May 27, 2026

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

Installs into .claude/skills of the current project.

Are you the author of Layers?

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-layers/badge)](https://www.skillsdirectory.com/skills/reaviz-layers)

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

# Layers

Overlay, modal, and popup components that render above the main content. Built on Floating UI for positioning and Framer Motion for animations. Most use focus trapping and backdrop support.

## Components

| Component | Description |
|-----------|-------------|
| **Backdrop** | Animated overlay backdrop behind modals and drawers |
| **Callout** | Inline alert banner with variant colors (+ SuccessCallout, ErrorCallout, etc.) |
| **ConfirmDialog** | Confirmation dialog with accept/reject + `useConfirmDialog` hook |
| **ContextMenu** | Right-click context menu with global single-open state |
| **Dialog** | Modal dialog with slots (DialogHeader, DialogContent, DialogFooter) + `useDialog` hook |
| **Drawer** | Slide-in panel (start/end/top/bottom) with slots + `useDrawer` hook |
| **Menu** | Dropdown menu anchored to a reference element |
| **Notification** | Toast system with `<Notifications>` provider and `useNotification` hook |
| **Popover** | Click-triggered content popover with focus trapping |
| **Tooltip** | Hover tooltip with delays, follow-cursor, and placement |