Ember UI LogoEmber UI
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&apos;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/dialog
yarn shadcn@latest add @emberui/dialog
pnpm dlx shadcn@latest add @emberui/dialog
bunx --bun shadcn@latest add @emberui/dialog

Reference

This component is based on the shadcn/ui Dialog component.

On this page