Dialog

A pop-up layered above the application window or dialog, which makes the background content inert.

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/molecule-ui/dialog"

export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Confirm</DialogTitle>
          <DialogDescription>
            Ready to take your app to a next level with Molecule UI?
          </DialogDescription>
        </DialogHeader>

        <DialogFooter>
          <Button type="submit">Get Started</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Installation


pnpm dlx shadcn@latest add "https://moleculeui.design/r/dialog"

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/molecule-ui/dialog"

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure, you want to delete?</DialogTitle>
      <DialogDescription>This will permanently delete data associated to the customer. </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Examples

Custom close button

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/molecule-ui/dialog"

export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Confirm</DialogTitle>
          <DialogDescription>
            Ready to take your app to a next level with Molecule UI?
          </DialogDescription>
        </DialogHeader>

        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button type="submit">Get Started</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Without animation

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/molecule-ui/dialog"

export function DialogDemo() {
  return (
    <Dialog animated={false}>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Confirm</DialogTitle>
          <DialogDescription>
            Ready to take your app to a next level with Molecule UI?
          </DialogDescription>
        </DialogHeader>

        <DialogFooter>
          <Button type="submit">Get Started</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Checkbox Discussion

On This Page

Installation Examples Custom close button Without animation