Dialog

free

Dialog creates a focused modal step for confirmations and short tasks.

import { useState } from 'react';
import { PiArrowsLeftRight, PiEye, PiEyeSlash } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Dialog from '@/components/ui/dialog';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Dialog

pnpm dlx nateui@latest add Dialog

yarn dlx nateui@latest add Dialog

Examples

Basic

import { useState } from 'react';
import Button from '@/components/ui/button';
import Dialog from '@/components/ui/dialog';
import { PiLightning } from 'react-icons/pi'

Size

import { useState } from 'react';
import {
    PiBookmarkSimple,
    PiCode,

Custom Backdrop

import { useState } from 'react';
import { PiLightning } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Dialog from '@/components/ui/dialog';

Internal Scroll

import { useState } from 'react';
import Button from '@/components/ui/button';
import Dialog from '@/components/ui/dialog';
import Scroll from '@/components/ui/scroll';

Custom Layout

import { useState } from 'react';
import Button from '@/components/ui/button';
import Dialog from '@/components/ui/dialog';
import Form from '@/components/ui/form';

Closable

import { useState } from 'react';
import Button from '@/components/ui/button';
import Dialog from '@/components/ui/dialog';
import { PiLightning } from 'react-icons/pi'

Lock Scroll

import { useState } from 'react';
import Button from '@/components/ui/button';
import Dialog from '@/components/ui/dialog';
import { PiLightning } from 'react-icons/pi'

API

Dialog accepts the props below plus native props for the dialog content div.

Prop	Description	Type	Default
`children`	Modal content rendered inside the dialog surface.	`ReactNode`	-
`className`	Class names applied to the dialog content surface.	`string`	-
`closable`	Shows the default close button in the top corner.	`boolean`	`true`
`height`	Fixed height applied to the dialog content surface.	`string \| number`	-
`isOpen`	Controls whether the dialog is visible.	`boolean`	`false`
`lockScroll`	Locks document scrolling through the overlay while the dialog is mounted.	`boolean`	`false`
`onClose`	Called when the dialog asks to close through the close button, overlay, or Escape key. Update `isOpen` in this handler.	`DialogOpenChangeHandler`	-
`onOpen`	Called when the floating layer reports that the dialog opened.	`DialogOpenChangeHandler`	-
`overlayClassName`	Class names applied to the overlay element.	`string`	-
`ref`	Ref forwarded to the dialog content element.	`Ref<HTMLDivElement>`	-
`shouldCloseOnEsc`	Allows Escape to request closing the dialog.	`boolean`	`true`
`shouldCloseOnOverlayClick`	Allows an overlay click to request closing the dialog.	`boolean`	`true`
`width`	Width of the dialog in pixels. Falls back to auto width when the viewport is narrower.	`number`	`520`
`...nativeDivProps`	Native props applied to the dialog content element.	`NativeDialogDivProps`	-

Types

type DialogOpenChangeHandler = (open: boolean) => void;
type NativeDialogDivProps = ComponentProps<'div'>;