Modal

Basic dialog modal

Open with external trigger

Hello!

Press ESC key or click the button below to close.

Using trigger slot (self-contained)

Hello!

This modal uses the trigger slot — button is rendered by the component.

Close behaviours

Close on backdrop click

Hello!

Press ESC key or click outside to close.

Corner close button

Hello!

Press ESC key or click the ✕ button to close.

Both: backdrop + corner button

Hello!

Press ESC, click outside, or click ✕ to close.

Placements

Middle (default)

Middle

This modal appears in the middle of the screen.

Top

This modal slides down from the top.

Bottom

This modal slides up from the bottom.

Start (left)

Start

This modal appears on the left side.

End (right)

End

This modal appears on the right side.

Responsive — bottom on mobile, middle on sm+

Hello!

Press ESC key or click the button below to close.

Custom width

Wide modal (w-11/12 max-w-5xl)

Wide modal

You can use any w-* and max-w-* utility classes via the boxClass prop to customise the width.

Actions

Confirm dialog

Are you sure?

This action cannot be undone. Do you want to continue?

Scrollable long content

Long content

Paragraph 1 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 2 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 3 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 4 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 5 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 6 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 7 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 8 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 9 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 10 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 11 — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 12 — lorem ipsum dolor sit amet, consectetur adipiscing elit.