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
1---2name: layers3description: Layers4---5# Layers67Overlay, 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.89## Components1011| Component | Description |12|-----------|-------------|13| **Backdrop** | Animated overlay backdrop behind modals and drawers |14| **Callout** | Inline alert banner with variant colors (+ SuccessCallout, ErrorCallout, etc.) |15| **ConfirmDialog** | Confirmation dialog with accept/reject + `useConfirmDialog` hook |16| **ContextMenu** | Right-click context menu with global single-open state |17| **Dialog** | Modal dialog with slots (DialogHeader, DialogContent, DialogFooter) + `useDialog` hook |18| **Drawer** | Slide-in panel (start/end/top/bottom) with slots + `useDrawer` hook |19| **Menu** | Dropdown menu anchored to a reference element |20| **Notification** | Toast system with `<Notifications>` provider and `useNotification` hook |21| **Popover** | Click-triggered content popover with focus trapping |22| **Tooltip** | Hover tooltip with delays, follow-cursor, and placement |
Run npx skillmds@latest add reaviz/layers in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Layers It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
reaviz (@reaviz) published this skill. Their other Agent Skills are listed on their SkillMD profile.
reaviz