Modal

Modal dialog component for focused interactions

Modal

Modals are dialog overlays that focus the user's attention on a specific task or piece of information.

Installation

Add the modal component to your project:

npx velyx add modal
pnpm dlx velyx add modal
yarn dlx velyx add modal
bunx --bun velyx add modal

Alpine.js Required: The modal component requires Alpine.js for interactivity. Make sure Alpine.js is installed in your project.

Usage

Basic Modal

Loading preview...

Failed to load preview

Code

Small Modal

Loading preview...

Failed to load preview

Code

Large Modal

Loading preview...

Failed to load preview

Code

Fullscreen Modal

Loading preview...

Failed to load preview

Code

Props

Prop Type Default Description
id string modal Unique identifier for the modal
size string md Modal size (sm, md, lg, xl, 2xl, 3xl, 4xl, full)
closeable boolean true Show close button and allow closing
title string null Modal title
footer slot null Modal footer content

Accessibility

Modals include:

  • Focus trap - Tab cycles within modal
  • Escape key - Closes modal when closeable is true
  • Click outside - Closes modal when closeable is true
  • ARIA attributes - Proper screen reader support

Keyboard Interactions

Key Action
Escape Close modal (when closeable)
Tab Move focus within modal
Shift + Tab Move focus backwards

Next Steps