LogoClawIndex
CasesSkillsAbout
LogoClawIndex

modal-drawer-system - Accessible Modal & Drawer Component Generator

Generates accessible modal dialogs and drawer components with focus trap, ESC close, scroll lock, portal rendering, and ARIA attributes.

Tags

Updated: 2026-06-30
modaldraweraccessibilityReactUI componentsdialogoverlayARIA

Capabilities

Create modal componentCreate drawer componentCreate confirmation dialogCreate edit form modal

Typical Inputs

React projectComponent configuration (size, position, variant)Child content (React nodes)

Typical Outputs

Modal component source codeDrawer component source codeConfirmation dialog source code

What this skill does

  • Create modal component
  • Create drawer component
  • Create confirmation dialog
  • Create edit form modal
  • Create detail view drawer
  • Implement focus trap
  • Implement body scroll lock
  • Implement portal rendering
  • Add ARIA attributes
  • Add keyboard navigation

Inputs

  • React project
  • Component configuration (size, position, variant)
  • Child content (React nodes)

Outputs

  • Modal component source code
  • Drawer component source code
  • Confirmation dialog source code
  • Edit form modal source code

Requirements

  • React environment with hooks support
  • react-dom for createPortal
  • lucide-react for icons
  • Tailwind CSS for styling
  • Next.js client component support

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.