Dialog - Stera UI

Installation

pnpm dlx stera-ui add dialog

Usage

import {
  Dialog,
  DialogTrigger,
  DialogPopup,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogContent,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger render={<Button variant="outline">Open</Button>} />
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description.</DialogDescription>
    </DialogHeader>
    <DialogContent>
      {/* body content */}
    </DialogContent>
    <DialogFooter showCloseButton>
      <Button>Save</Button>
    </DialogFooter>
  </DialogPopup>
</Dialog>

Confirmation Dialog

Use DialogClose with a custom button to create cancel/confirm action pairs.

Scrollable Content

Set scroll="content" on DialogPopup and scroll on DialogContent to let the body scroll while the header and footer remain sticky.

API Reference

DialogPopup

Prop	Type	Default
`scroll`	`false \| "content"`	`false`
`showCloseButton`	`boolean`	`true`
`initialFocus`	`boolean`	`true`

DialogFooter

Prop	Type	Default
`showCloseButton`	`boolean`	`false`

DialogTrigger

Prop	Type	Description
`render`	`ReactElement`	Render prop for the trigger element

DialogClose

Prop	Type	Description
`render`	`ReactElement`	Render prop for the close element