UI Framework
General
  • Typography
  • Lists
  • Colors
  • Buttons
  • Badges
  • Inputs
  • Cards
  • Table
  • Grid
  • Flex
  • Display
  • Margin
  • Padding
  • Sizing
  • Navbar
  • Background
  • Rounded
  • Shadow
  • Outline
  • Border
Plugins
  • Tabs
  • Accordion
  • Dropdown
  • Tooltip
  • Toast
  • Modal
  • Offcanvas
  • Lightbox
  • Slideshow
  • Slider
  • Clipboard
  • Password
  • Relativetime
  • Dropselect
  • Imageslot
  • Sparkline
Examples
  • Examples

Modal Reference ↓

Default

Modal Title

Modals are accessible by default - they trap focus, respond to Escape, and restore focus when closed. Use them for confirmations, forms, media, or rich content.

Delete item?

You are about to permanently delete project-alpha and all its data. This action cannot be undone.

Terms & Conditions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Edit Profile

Permanent action

You are about to permanently delete your account and all associated data. This cannot be undone.

Keyboard shortcuts

No footer - close via header button or by clicking the backdrop.

Key Action
Ctrl + S Save
Ctrl + Z Undo
Ctrl + Shift + Z Redo
Esc Close modal

Reference

Base

Attribute / optionDescription
ui-modalmarks the <dialog> element
data-ui-modal-open="id"opens the modal with that id
data-ui-modal-closecloses the currently open modal
.ui-modal-headerheader area with title + close button
.ui-modal-bodyscrollable content area
.ui-modal-footerfooter action area

Modifiers

Attribute / optionDescription

Options

Attribute / optionDescription