Components
Dialog
A dialog component
Preview
Loading...
import { Button } from "@/registry/axon/ui/button";import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger,} from "@/registry/axon/ui/dialog";import { Input } from "@/registry/axon/ui/input";import { Label } from "@/registry/axon/ui/label";export default function DialogDemo() { return ( <Dialog> <form> <DialogTrigger asChild> <Button variant="outline">Open Dialog</Button> </DialogTrigger> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>Edit profile</DialogTitle> <DialogDescription> Make changes to your profile here. Click save when you're done. </DialogDescription> </DialogHeader> <div className="grid gap-4"> <div className="grid gap-3"> <Label htmlFor="name-1">Name</Label> <Input defaultValue="Pedro Duarte" id="name-1" name="name" /> </div> <div className="grid gap-3"> <Label htmlFor="username-1">Username</Label> <Input defaultValue="@peduarte" id="username-1" name="username" /> </div> </div> <DialogFooter> <DialogClose asChild> <Button variant="outline">Cancel</Button> </DialogClose> <Button type="submit">Save changes</Button> </DialogFooter> </DialogContent> </form> </Dialog> );}Installation
CLI
npx shadcn@latest add @emberui/dialogyarn shadcn@latest add @emberui/dialogpnpm dlx shadcn@latest add @emberui/dialogbunx --bun shadcn@latest add @emberui/dialogReference
This component is based on the shadcn/ui Dialog component.