Dialog

Modal dialog. Use for confirmations, forms, or focused content. Based on Radix UI Dialog.

Installation

npm install @nqlib/nqui

Import

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@nqlib/nqui';

Basic Usage

Copy this into your app — same pattern as the first example below.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@nqlib/nqui';
import { Button } from '@nqlib/nqui';

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Title</DialogTitle>
          <DialogDescription>Description</DialogDescription>
        </DialogHeader>
        <p>Body</p>
        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button>Save</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Examples

Each example has a Preview and Code tab. The code is copy-paste ready for your app (import from '@nqlib/nqui', same usage as above).

Basic Dialog

Modal dialog with trigger, content, header, and footer (Core Radix)

example.tsx

import {  Dialog,  DialogTrigger,  DialogContent,  DialogHeader,  DialogTitle,  DialogDescription,  DialogFooter,} from '@nqlib/nqui';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <Dialog>      <DialogTrigger asChild>        <Button>Open</Button>      </DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Title</DialogTitle>          <DialogDescription>Description</DialogDescription>        </DialogHeader>        <p>Body</p>        <DialogFooter>          <Button variant="outline">Cancel</Button>          <Button>Save</Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Controlled

Use open and onOpenChange for controlled state:

<Dialog open={open} onOpenChange={setOpen}>
  ...
</Dialog>

Props

Dialog (Root)

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Uncontrolled default open
`onOpenChange`	`(open: boolean) => void`	-	Callback when open changes
`modal`	`boolean`	`true`	Whether dialog is modal

DialogTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props into child (e.g. Button)
All standard `button` props	-	-	Accepts HTML button attributes

DialogContent

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Show close (X) button
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Callback for Escape key
`onPointerDownOutside`	`(event: Event) => void`	-	Callback for outside click
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts HTML div attributes

DialogFooter

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`false`	Add a Close button
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts HTML div attributes

DialogHeader, DialogTitle, DialogDescription

Accept standard div/h2/p props plus className.

Next Steps

Alert Dialog for confirmations
Sheet for slide-over panels