Overlays v2.0.0

Modal Dialog

Accessible modal dialogs with backdrop, focus trapping, and smooth animations. Available in default, alert, confirm, and prompt variants. Built with Stimulus and Tailwind CSS.

Default

General-purpose modal dialog with title, content, and close button

Options

Name Type Default Description
title * String required Modal heading text
content String Modal body text (or pass a block)

Alert

Alert dialog with variant icon, message, and single OK button

Options

Name Type Default Description
variant Symbol :info Visual style: :info, :warning, :danger, :success
title * String required Alert heading text
message * String required Alert body message
confirm_label String "OK" Text for the confirm button

Confirm

Confirmation dialog with icon, message, and Cancel/Confirm buttons

Options

Name Type Default Description
variant Symbol :info Visual style: :info, :warning, :danger, :success
title * String required Confirm heading text
message * String required Confirm body message
confirm_label String "Confirm" Text for the confirm button
cancel_label String "Cancel" Text for the cancel button

Prompt

Prompt dialog with icon, message, input field, and Cancel/Submit buttons

Options

Name Type Default Description
variant Symbol :info Visual style: :info, :warning, :danger, :success
title * String required Prompt heading text
message * String required Prompt body message
input_label String Label for the input field
input_placeholder String Placeholder text for the input field
input_value String "" Default value for the input field
confirm_label String "Submit" Text for the submit button
cancel_label String "Cancel" Text for the cancel button

Changelog v2.0.0

- v2.0.0: Converted to multi-style with alert, confirm, and prompt variants
- v1.1.0: Added ViewComponent format support
- v1.0.0: Initial release with focus trap, backdrop click to close

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now