Dialog Demo

PreviousNext

A demo component for a animated dialog built on top of radix-ui

Docs
moleculeuiexample

Preview

Loading preview…
registry/example/dialog-demo.tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/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

npx shadcn@latest add @moleculeui/dialog-demo

Usage

import { DialogDemo } from "@/components/dialog-demo"
<DialogDemo />