Notifications
- New user registered
- View all
Modals & Offcanvas
Dialog overlays and side-panel drawers for contextual interactions.
Modal Variants
Offcanvas Panels
Basic Modal
This is a basic modal dialog. You can place any content here — text, images, forms, tables, and more.
Modal dialogs overlay the page content and require user interaction before returning to the main page.
Add New User
Delete Record?
This action cannot be undone. The record will be permanently removed.
Large Modal
Large modals are useful for complex content like tables, rich forms, or media previews that need more horizontal space.
Small Modal
A compact modal for quick messages or confirmations.
Scrollable Modal
This modal has a scrollable body. The header and footer remain fixed while the content area scrolls.
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 nisi ut aliquip ex ea commodo consequat.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.
Vertically Centered
This modal is centered vertically in the viewport — ideal for alert-style dialogs.
Left Panel
Notification Panel
Recent notifications
Top Panel
This offcanvas slides down from the top. Useful for search bars or announcements.
Bottom Panel
This offcanvas slides up from the bottom. Often used for action sheets on mobile.