# Layers

> Layers

- Skill: `reaviz/layers` (Agent Skill)
- Install (CLI): `npx skillmds@latest add reaviz/layers`
- Raw SKILL.md: https://api.skillmd.com/api/skills/reaviz/layers/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: reaviz (https://skillmd.com/u/reaviz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/reaviz/layers

---

# 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 |