NexoreUI
2.0
InstallationComponentsIconsTemplatesNewNexore MakePricing
Create Project
GitHub
NexoreUI
2.0
Navigation
InstallationComponentsIconsTemplatesNexore MakeCreate Project
InstallationComponents OverviewIcons
Categories (65)
ButtonInputCheckboxSelectSwitchSliderRatingFile Upload
CardAccordionTabsTableStepperScroll AreaNavigationDockData DisplayChartsCommerce
Modal (Dialog)AlertBadgeAvatarTooltipProgressSkeletonLoadersToasterSocial
Aurora Border CardAurora Search PillAI Prompt InputCommandInteractive Code BlockPro AI
Media ShowcaseOverlays & DrawersPro ButtonsPro DashboardsPro E-CommercePro FeedbackPro FormsPro InputsPro LayoutsPro ListsPro MarketingPro NavigationPro TablesSpecial FormsUltra Components
OverviewPro CardsPro ObjectsSoundPulseSilkUnveilNode Flow Graph
NexoreUI v2.0Studio
DocsModal / Dialog

Modal / Dialog

Overlay dialogs for focused interactions.

PreviousData Display
NextAlert
On This Page
Quick ActionsProject StudioNewNexore Make (AI)Source on GitHub

Dialogs & Overlays

Dialogs, drawers, and overlays for focused actions, inputs, or critical confirmations built on a strict compound pattern.

When to use which variant

defaultStandard popups — confirmations, simple forms, settings dialogs
glassHigh-end marketing or dashboard modals needing premium backdrop-blur
destructiveCritical warnings — irreversible deletion, security confirmations
successPositive confirmation — payment success, operation complete
fullscreenImmersive workflows — large content editing, step-by-step wizards
drawerMobile-optimized views — slide-up panels from the bottom

Interactive Playground

Live CanvasInteractive

Dialog Title

This is a detailed description of the dialog action.

Provide modal details here. This can be form inputs, progress steps, or text explanation.
Controls(9)
isOpen
boolean
Toggle state:

Whether the dialog is open

variant
select

Visual theme of the dialog content

size
select

Size width of the dialog window

title
text

Title of the dialog (Mapped to <DialogTitle>)

description
text

Description of the dialog content (Mapped to <DialogDescription>)

confirmText
text

Label for the confirm action button

cancelText
text

Label for the cancel action button

scrollable
boolean
Toggle state:

Whether the body content is scrollable

children
text

Inner content of the modal dialog

Generated JSX
Source
import { Dialog } from "nexoreui"

<Dialog>
  Provide modal details here. This can be form inputs, progress steps, or text explanation.
</Dialog>

Showcase & Examples

Basic Dialog

component.tsx
1

API Reference (Props)

PropTypeDefaultDescription
variant"default" | "glass" | "destructive" | "success" | "fullscreen" | "drawer""default"Visual style variant of the dialog content.
size"sm" | "md" | "lg" | "xl" | "2xl" | "full""lg"Responsive width profile of the dialog.
scrollablebooleanfalseEnables vertical scrolling within the dialog body if content overflows.

Accessibility (a11y)

  • Keyboard Navigation: Pressing Tab cycles focus through interactive elements inside the modal. Pressing Escape closes the modal.
  • Aria Attributes: Built on top of Radix UI Dialog, automatically supplying proper ARIA roles (role="dialog"), aria-describedby, and aria-labelledby attributes.
  • Focus Restoration: Automatically returns focus to the trigger element when the modal is closed.