Skip to content
Storm UI
Docs/Dialog

Dialog

Modal dialog using native dialog element.

Usage

tsx
1'use client'
2import { useRef } from 'react'
3import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Button } from '@storm-ds/ui'
4
5function MyDialog() {
6  const ref = useRef<HTMLDialogElement>(null)
7  return (
8    <>
9      <Button onClick={() => ref.current?.showModal()}>Open</Button>
10      <Dialog ref={ref}>
11        <DialogContent>
12          <DialogHeader>
13            <DialogTitle>Dialog Title</DialogTitle>
14          </DialogHeader>
15          <p>Dialog content goes here.</p>
16          <DialogFooter>
17            <Button onClick={() => ref.current?.close()}>Close</Button>
18          </DialogFooter>
19        </DialogContent>
20      </Dialog>
21    </>
22  )
23}

Default

Dialog Title

This is a description of the dialog content.

Dialog body content goes here.

tsx
1'use client'
2import { useRef } from 'react'
3import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, Button } from '@storm-ds/ui'
4
5function MyDialog() {
6  const ref = useRef<HTMLDialogElement>(null)
7  return (
8    <>
9      <Button onClick={() => ref.current?.showModal()}>Open Dialog</Button>
10      <Dialog ref={ref}>
11        <DialogContent>
12          <DialogHeader>
13            <DialogTitle>Confirm Action</DialogTitle>
14            <DialogDescription>This action cannot be undone.</DialogDescription>
15          </DialogHeader>
16          <DialogFooter>
17            <DialogClose ref={ref} />
18            <Button onClick={() => ref.current?.close()}>Confirm</Button>
19          </DialogFooter>
20        </DialogContent>
21      </Dialog>
22    </>
23  )
24}

Sizes

Small Dialog

Compact dialog for simple confirmations.

Large Dialog

More space for detailed content.

Extra Large Dialog

Maximum content area for complex forms or data.

tsx
1<Dialog ref={ref} size="lg">
2  <DialogContent>
3    <DialogHeader>
4      <DialogTitle>Large Dialog</DialogTitle>
5    </DialogHeader>
6    <p>Content here.</p>
7  </DialogContent>
8</Dialog>

Note

Dialog uses the native `<dialog>` element. Call `ref.current?.showModal()` to open and `ref.current?.close()` to close. This requires a client component wrapper.

Props

PropTypeDefaultDescription
refRef<HTMLDialogElement>-Ref to control open/close via showModal()/close()
size'sm' | 'md' | 'lg' | 'xl' | 'full''md'Dialog width
classNamestring-Custom classes

Use with AI

Create a Next.js client component using Storm UI's Dialog. Import: `import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, Button } from '@storm-ds/ui'`. Uses native <dialog> element. Requires 'use client' and useRef. Open with ref.current?.showModal(), close with ref.current?.close(). Use size prop for sm/md/lg/xl/full width. Use DialogDescription for subtitle text, DialogClose for the close button. Example: `const ref = useRef(null); <Button onClick={() => ref.current?.showModal()}>Open</Button><Dialog ref={ref} size="md"><DialogContent><DialogHeader><DialogTitle>Title</DialogTitle><DialogDescription>Description</DialogDescription></DialogHeader><DialogFooter><DialogClose ref={ref} /><Button onClick={() => ref.current?.close()}>Confirm</Button></DialogFooter></DialogContent></Dialog>`

Previous

Sidebar

Next

AlertDialog