Dialog

Shows a focused task in a modal above the page.

dialog-demo.tsx

"use client";import {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/vip-ui/dialog";export function DialogDemo() {  return (    <Dialog>      <DialogTrigger>Open dialog</DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Dialog title</DialogTitle>          <DialogDescription>            Review the details before you continue.          </DialogDescription>          <DialogClose />        </DialogHeader>        <DialogFooter>          <DialogClose variant="outline">Close</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-dialog.json

Composition

Dialog
Owns the open state.
- DialogTrigger
- DialogContent
  - DialogHeader
    - DialogTitle
    - DialogDescriptionOptional
    - DialogCloseOptional
      Can also go in DialogFooter as a text button.
  - DialogBodyOptional
    Scrolls when the content does not fit.
  - DialogFooterOptional

Sizes

dialog-sizes-demo.tsx

"use client";import {  Dialog,  DialogBody,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  type DialogSize,  DialogTitle,  DialogTrigger,} from "@/components/vip-ui/dialog";const sizes: { size: DialogSize; label: string; use: string }[] = [  { size: "sm", label: "Small", use: "Use for a short question." },  { size: "md", label: "Medium", use: "Use for most forms and messages." },  { size: "lg", label: "Large", use: "Use for forms with two columns." },  { size: "xl", label: "Extra large", use: "Use for tables and previews." },  {    size: "full",    label: "Full screen",    use: "Use for a long task. On phones, the dialog fills the screen.",  },];export function DialogSizesDemo() {  return (    <div className="flex flex-wrap justify-center gap-2">      {sizes.map(({ size, label, use }) => (        <Dialog key={size}>          <DialogTrigger variant="outline">{label}</DialogTrigger>          <DialogContent size={size}>            <DialogHeader>              <DialogTitle>{label}</DialogTitle>              <DialogDescription>{use}</DialogDescription>              <DialogClose />            </DialogHeader>            <DialogBody className="grid">              <div className="grid min-h-28 place-items-center rounded-lg border border-dashed border-border text-sm text-muted-foreground">                Content              </div>            </DialogBody>            <DialogFooter>              <DialogClose variant="outline">Close</DialogClose>            </DialogFooter>          </DialogContent>        </Dialog>      ))}    </div>  );}

Alert dialog

Set role="alertdialog" on DialogContent. An outside click nudges the dialog and does not close it.

dialog-alert-demo.tsx

"use client";import {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/vip-ui/dialog";export function DialogAlertDemo() {  return (    <Dialog>      <DialogTrigger variant="outline">Delete project</DialogTrigger>      <DialogContent role="alertdialog" size="sm">        <DialogHeader>          <DialogTitle>Delete this project?</DialogTitle>          <DialogDescription>            This deletes the project and its files for all members. You cannot            undo this.          </DialogDescription>        </DialogHeader>        <DialogFooter>          <DialogClose variant="outline">Cancel</DialogClose>          <DialogClose variant="destructive">Delete project</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Form

Put the form around DialogBody and DialogFooter, and call close after submit. Also install Form, Text field and Text area.

dialog-form-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import {  Dialog,  DialogBody,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/vip-ui/dialog";import { Form } from "@/components/vip-ui/form";import { TextArea } from "@/components/vip-ui/text-area";import { TextField } from "@/components/vip-ui/text-field";export function DialogFormDemo() {  return (    <Dialog>      <DialogTrigger variant="outline">Edit profile</DialogTrigger>      <DialogContent>        {({ close }) => (          <>            <DialogHeader>              <DialogTitle>Edit profile</DialogTitle>              <DialogDescription>                Other members see this on your profile.              </DialogDescription>              <DialogClose />            </DialogHeader>            <Form              className="contents"              onSubmit={(event) => {                event.preventDefault();                close();              }}            >              <DialogBody className="grid content-start gap-4">                <TextField                  name="name"                  label="Name"                  defaultValue="Maya Patel"                  isRequired                  autoFocus                />                <TextField                  name="username"                  label="Username"                  defaultValue="maya"                  isRequired                />                <TextArea                  name="bio"                  label="Bio"                  rows={3}                  defaultValue="Product designer. I work on the editor."                />              </DialogBody>              <DialogFooter>                <DialogClose variant="outline">Cancel</DialogClose>                <Button type="submit">Save changes</Button>              </DialogFooter>            </Form>          </>        )}      </DialogContent>    </Dialog>  );}

Scrollable content

Only DialogBody scrolls. The header and footer stay in view.

dialog-scrollable-demo.tsx

"use client";import {  Dialog,  DialogBody,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/vip-ui/dialog";const sections = [  {    title: "Files",    details:      "Check the final layouts, icons, and source files. Confirm that each link opens before handing the project to the next team.",  },  {    title: "Access",    details:      "Review who can edit the project and remove invitations that are no longer needed. Keep one owner available for follow-up questions.",  },  {    title: "Notes",    details:      "Record decisions that aren't visible in the files, including which designs were rejected and what remains unfinished.",  },  {    title: "Approval",    details:      "Ask a teammate to check the handoff and approve the final version before you archive the working draft.",  },  {    title: "Next steps",    details:      "Share the review link with the implementation team. Track any follow-up requests in the project instead of sending separate copies of the files.",  },  {    title: "Schedule",    details:      "Agree on a date for the first review. Leave time to check feedback against the final files before the team starts building.",  },  {    title: "Contacts",    details:      "List the people who can answer design and access questions. Include a backup contact in case the project owner is unavailable.",  },  {    title: "Archive",    details:      "Keep the approved files in one place. Move drafts out of the handoff folder so the implementation team does not work from an old version.",  },];export function DialogScrollableDemo() {  return (    <Dialog>      <DialogTrigger variant="outline">Read handoff checklist</DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Project handoff</DialogTitle>          <DialogDescription>            Review each section before sharing the project with your team.          </DialogDescription>          <DialogClose />        </DialogHeader>        <DialogBody className="grid gap-5">          {sections.map((section) => (            <section key={section.title}>              <h3 className="text-sm font-semibold">{section.title}</h3>              <p className="mt-2 text-sm leading-6 text-muted-foreground">                {section.details}              </p>            </section>          ))}        </DialogBody>        <DialogFooter>          <DialogClose variant="outline">Done</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Controlled open state

Escape and outside clicks also call onOpenChange.

dialog-controlled-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogTitle,  DialogTrigger,} from "@/components/vip-ui/dialog";export function DialogControlledDemo() {  const [isOpen, setIsOpen] = useState(false);  return (    <div className="flex flex-wrap items-center gap-3">      <Button onPress={() => setIsOpen(true)}>Open from app state</Button>      <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>        <DialogTrigger>Open from trigger</DialogTrigger>        <DialogContent>          <DialogTitle>Controlled dialog</DialogTitle>          <DialogDescription>            Review the details before you continue.          </DialogDescription>          <div className="mt-5 flex justify-end">            <Button onPress={() => setIsOpen(false)}>              Close from app state            </Button>          </div>        </DialogContent>      </Dialog>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Modal (opens in a new tab).

DialogContent

size: "sm" | "md" | "lg" | "xl" | "full" = "md": The maximum width from 640px up: 24rem, 28rem, 36rem, or 48rem. full fills the screen less a 1rem gutter. On phones, every size is full width, and full also fills the height.
children: ReactNode | ({ close }) => ReactNodeRequired: A function receives close, for example to close the dialog after a form submits.
overlayProps: ModalOverlayProps = { isDismissable: true }: React Aria ModalOverlay props, such as isDismissable and isKeyboardDismissDisabled. With role="alertdialog", outside clicks never close the dialog.
modalProps: ModalProps: Props for the panel. For a width that is not in size, set className here, for example sm:max-w-2xl.

DialogClose

Takes all Button props.

children: ReactNode: Text for the button. Without children, it shows an X icon labeled "Close dialog".
variant: "default" | "secondary" | "outline" | "ghost" | "minimal" | "destructive" = "ghost": The Button variant.
iconOnly: boolean: Makes the button a square for one icon. The default is true without children and false with children.
size: "xs" | "sm" | "md" | "lg" | "xl" = "sm" without children, "md" with children: The Button size. An icon-only close button uses sm to stay compact.