@cf/ui

@cf/dialog

Dialog

A modal window for a focused task, like a short form or a media viewer, that the person can dismiss freely.

Base UI's Dialog. The popup is capped at 100svh - 2rem and scrolls, because without that anything taller than the screen got clipped with no way to reach the rest of it. It's max-w-sm from sm up, so wider content (the media viewer uses sm:max-w-3xl) has to say so.

DialogFooter bleeds to the popup's edges with a muted band, and can render its own outline Close button with showCloseButton. The note dialogs (add video, image alt text, section settings) all follow header, fields, footer.

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
 
<Dialog onOpenChange={setOpen} open={open}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Add video</DialogTitle>
      <DialogDescription>Paste a link to an mp4.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">Add</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

PropTypeDefault
DialogContent showCloseButtonbooleantrue
DialogFooter showCloseButtonbooleanfalse

Rules

The same rules ship in DESIGN.md and the MCP server, for the agents building with this.

  • must

    Give every DialogContent a DialogTitle, or an aria-label when the content has no heading of its own (as the chat media viewer does).

    title-or-label

  • must

    Use AlertDialog, not Dialog, to confirm a destructive or irreversible action.

    An alert dialog isn't dismissed by clicking outside, so a confirmation can't be skipped by accident.

    alert-dialog-for-confirmation

  • should

    Keep the default close button (showCloseButton is true), or set showCloseButton={false} and render your own DialogClose; don't end up with two or none.

    one-close-button

  • should

    Put the actions in DialogFooter, primary last in source order, so they stack with the primary on top below sm and sit right-aligned above it.

    footer-for-actions

Install

bunx shadcn@latest add @cf/dialog

Needs the @cf registry in your components.json once. The theme and any sibling components come along automatically.

Source

dialog.tsxShow
"use client";
 
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
import { XIcon } from "@phosphor-icons/react";
import { cn } from "cn";
import type * as React from "react";
import { Button } from "./button";
 
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
}
 
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
}
 
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
}
 
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
}
 
function DialogOverlay({
  className,
  ...props
}: DialogPrimitive.Backdrop.Props) {
  return (
    <DialogPrimitive.Backdrop
      className={cn(
        "data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-foreground/10 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs",
        className
      )}
      data-slot="dialog-overlay"
      {...props}
    />
  );
}
 
function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: DialogPrimitive.Popup.Props & {
  showCloseButton?: boolean;
}) {
  return (
    <DialogPortal>
      <DialogOverlay />
      {/* Capped and scrollable: without it, anything taller than the screen is
          clipped with no way to reach the rest of it. */}
      <DialogPrimitive.Popup
        className={cn(
          "data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100svh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto overscroll-contain rounded-xl bg-popover p-4 text-popover-foreground text-sm outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in sm:max-w-sm",
          className
        )}
        data-slot="dialog-content"
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            render={
              <Button
                className="absolute top-2 right-2"
                size="icon-sm"
                variant="ghost"
              />
            }
          >
            <XIcon data-icon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Popup>
    </DialogPortal>
  );
}
 
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      className={cn("flex flex-col gap-2", className)}
      data-slot="dialog-header"
      {...props}
    />
  );
}
 
function DialogFooter({
  className,
  showCloseButton = false,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  showCloseButton?: boolean;
}) {
  return (
    <div
      className={cn(
        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
        className
      )}
      data-slot="dialog-footer"
      {...props}
    >
      {children}
      {showCloseButton && (
        <DialogPrimitive.Close render={<Button variant="outline" />}>
          Close
        </DialogPrimitive.Close>
      )}
    </div>
  );
}
 
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
  return (
    <DialogPrimitive.Title
      className={cn("font-medium text-base leading-none", className)}
      data-slot="dialog-title"
      {...props}
    />
  );
}
 
function DialogDescription({
  className,
  ...props
}: DialogPrimitive.Description.Props) {
  return (
    <DialogPrimitive.Description
      className={cn(
        "text-muted-foreground text-sm *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
        className
      )}
      data-slot="dialog-description"
      {...props}
    />
  );
}
 
export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
};