@corvu-next/dialog

Modal dialog component for SolidJS 2.0 with focus trapping, scroll lock, and animation support.

Note: This is the Solid 2.0 fork of corvu. It targets [email protected].

Features

• Focus trap keeps keyboard navigation within the dialog
• Scroll lock prevents background scrolling while open
• Dismissible via Escape key and outside click
• CSS animation/transition support for open/close
• Portal rendering for proper stacking context
• WAI-ARIA Dialog pattern compliant
• Controlled and uncontrolled state

Installation

npm install @corvu-next/dialog
# or
pnpm add @corvu-next/dialog

Usage

import Dialog from '@corvu-next/dialog'

function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Label>Confirm Action</Dialog.Label>
          <Dialog.Description>
            Are you sure you want to proceed?
          </Dialog.Description>
          <Dialog.Close>Cancel</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

API

| Component | Description | |-----------|-------------| | Dialog.Root | Container. Props: open/onOpenChange for controlled mode, modal. | | Dialog.Trigger | Button that opens the dialog. | | Dialog.Portal | Renders children into a portal outside the DOM hierarchy. | | Dialog.Overlay | Backdrop overlay. Supports CSS animations. | | Dialog.Content | Dialog content panel. Manages focus trap and scroll lock. | | Dialog.Label | Accessible title for the dialog (aria-labelledby). | | Dialog.Description | Accessible description (aria-describedby). | | Dialog.Close | Button that closes the dialog. |

Further Reading

This package is part of corvu-next, a collection of unstyled, accessible and customizable UI primitives for SolidJS 2.0.