Dialog

Once per app, add the registry to components.json:

{
  "registries": {
    "@pixilui": "https://pixilui.com/r/{name}.json"
  }
}

Or install from the URL, no namespace needed: npx shadcn@latest add https://pixilui.com/r/dialog.json

1. 1

   Install the npm packages.

   TerminalCopy

   npm install @base-ui/react motion clsx tailwind-merge

2. 2

   Add the items it depends on, the same way.

   • Foundation
   • Button
3. 3

   Copy each file to the path shown.

   components/pixilui/dialog.tsxCopy

   "use client";
   
   import {
     createContext,
     forwardRef,
     isValidElement,
     useCallback,
     useContext,
     useId,
     useMemo,
     useRef,
     useState,
     type ComponentPropsWithoutRef,
     type ReactElement,
     type ReactNode,
     type RefObject,
   } from "react";
   import { Dialog as BaseDialog } from "@base-ui/react/dialog";
   import { AnimatePresence, motion, useReducedMotion } from "motion/react";
   import { cn } from "./lib/utils";
   import { motionTokens, reducedTransition } from "./motion-tokens";
   import { Button, type ButtonProps } from "./button";
   
   export type DialogSize = "sm" | "md" | "lg";
   export type DialogVariant = "default" | "danger";
   
   /** Where an overlay portals to: an element, or null while that element is not mounted yet. */
   export type DialogContainer = HTMLElement | null;
   
   export type DialogProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> & {
     /** The dialog's parts: DialogTitle, DialogDescription, your content, DialogActions. */
     children?: ReactNode;
     /** Controlled open state. Pair with onOpenChange. */
     open?: boolean;
     /** Starting open state when uncontrolled. */
     defaultOpen?: boolean;
     /** Runs whenever the dialog opens or closes, from the trigger, Esc, an outside press or an action. */
     onOpenChange?: (open: boolean) => void;
     /** The element that opens the dialog, usually a Button. It is rendered through Base UI's render prop, so any element works and keeps its own props. */
     trigger?: ReactElement;
     /** Panel width: sm is 384px, md 448px, lg 576px. It never exceeds the viewport. */
     size?: DialogSize;
     /** danger tints the icon tile, styles the confirm action with the danger tokens, places it second and focuses Cancel first. */
     variant?: DialogVariant;
     /** Close on Esc and on a press outside the panel. Turn off for a decision that must be made. */
     dismissible?: boolean;
     /** A mark shown in a tile above the title. Components never bake in an icon. */
     icon?: ReactNode;
     /** Where the dialog portals to. Defaults to document.body. Pass an element (from a callback ref kept in state) to keep it inside a region; null waits for it. */
     container?: DialogContainer;
     /** true traps focus, locks page scroll and blocks the page; "trap-focus" only traps focus. Defaults to true, or "trap-focus" when a container is set. */
     modal?: boolean | "trap-focus";
   };
   
   type DialogContextValue = {
     variant: DialogVariant;
     close: () => void;
     cancelRef: RefObject<HTMLButtonElement | null>;
     setPending: (pending: boolean) => void;
   };
   
   const DialogContext = createContext<DialogContextValue | null>(null);
   
   function useDialogContext(part: string) {
     const context = useContext(DialogContext);
     if (!context) throw new Error(`${part} must be used inside a Dialog or Drawer.`);
     return context;
   }
   
   /** Shares the dialog's close action and variant with parts. Drawer reuses it with its own panel. */
   export const DialogProvider = DialogContext.Provider;
   
   const sizes: Record<DialogSize, string> = {
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-xl",
   };
   
   /** Base UI wants nativeButton={false} when the trigger renders something other than a button. */
   export function dialogTriggerIsNativeButton(trigger: ReactElement) {
     return typeof trigger.type === "string" ? trigger.type === "button" : true;
   }
   
   export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
     {
       children,
       open: openProp,
       defaultOpen = false,
       onOpenChange,
       trigger,
       size = "md",
       variant = "default",
       dismissible = true,
       icon,
       container,
       modal,
       className,
       ...rest
     },
     forwardedRef,
   ) {
     const reduced = useReducedMotion() ?? false;
     const [innerOpen, setInnerOpen] = useState(defaultOpen);
     const open = openProp ?? innerOpen;
     const generatedTriggerId = useId();
     const triggerId = (isValidElement<{ id?: string }>(trigger) && trigger.props.id) || generatedTriggerId;
     const cancelRef = useRef<HTMLButtonElement | null>(null);
     const pendingRef = useRef(false);
   
     const setOpen = useCallback(
       (next: boolean) => {
         setInnerOpen(next);
         onOpenChange?.(next);
       },
       [onOpenChange],
     );
   
     const context = useMemo<DialogContextValue>(
       () => ({
         variant,
         close: () => setOpen(false),
         cancelRef,
         setPending: (pending) => {
           pendingRef.current = pending;
         },
       }),
       [variant, setOpen],
     );
   
     const backdrop = reduced
       ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: reducedTransition }
       : {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           exit: { opacity: 0, transition: { duration: motionTokens.duration.quick, ease: motionTokens.ease.exit } },
           transition: { duration: motionTokens.duration.fast, ease: motionTokens.ease.smoothOut },
         };
   
     const blur = `blur(${motionTokens.blur.subtle}px)`;
     const panel = reduced
       ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: reducedTransition }
       : {
           initial: { opacity: 0, scale: motionTokens.scale.enterFrom, filter: blur },
           animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
           exit: {
             opacity: 0,
             scale: motionTokens.scale.enterFrom,
             filter: blur,
             transition: { duration: motionTokens.duration.quick, ease: motionTokens.ease.exit },
           },
           transition: {
             scale: motionTokens.spring.morph,
             default: { duration: motionTokens.duration.fast, ease: motionTokens.ease.enter },
           },
         };
   
     const state = open ? "open" : "closed";
   
     return (
       <BaseDialog.Root
         open={open}
         triggerId={trigger ? triggerId : undefined}
         modal={modal ?? (container !== undefined ? "trap-focus" : true)}
         disablePointerDismissal={!dismissible}
         onOpenChange={(next, details) => {
           // Esc and outside presses respect `dismissible`; nothing closes while an action is pending.
           if (!next && (pendingRef.current || (!dismissible && details.reason === "escape-key"))) {
             details.cancel();
             return;
           }
           setOpen(next);
         }}
       >
         {trigger ? <BaseDialog.Trigger id={triggerId} nativeButton={dialogTriggerIsNativeButton(trigger)} render={trigger} /> : null}
         <AnimatePresence>
           {open ? (
             <BaseDialog.Portal keepMounted container={container}>
               <BaseDialog.Backdrop
                 data-slot="dialog-backdrop"
                 data-state={state}
                 className="fixed inset-0 bg-background/70 backdrop-blur-subtle"
                 render={<motion.div {...backdrop} />}
               />
               <BaseDialog.Viewport className="fixed inset-0 flex items-center justify-center p-4 sm:p-6">
                 <DialogProvider value={context}>
                   <BaseDialog.Popup
                     ref={forwardedRef}
                     role={variant === "danger" ? "alertdialog" : "dialog"}
                     data-slot="dialog"
                     data-state={state}
                     data-size={size}
                     data-variant={variant}
                     initialFocus={variant === "danger" ? () => cancelRef.current ?? true : undefined}
                     className={cn(
                       "flex max-h-full w-full flex-col overflow-hidden rounded-panel bg-surface-raised font-body text-14 text-foreground shadow-floating outline-none hairline",
                       sizes[size],
                       className,
                     )}
                     render={<motion.div {...panel} />}
                     {...rest}
                   >
                     <div data-slot="dialog-body" className="flex min-h-0 flex-col gap-2 overflow-y-auto overscroll-contain p-6">
                       {icon ? (
                         <span
                           data-slot="dialog-icon"
                           className={cn(
                             "mb-2 grid size-10 shrink-0 place-items-center rounded-control [&_svg]:size-5",
                             variant === "danger" ? "bg-danger-subtle text-danger" : "bg-surface-muted text-foreground",
                           )}
                         >
                           {icon}
                         </span>
                       ) : null}
                       {children}
                     </div>
                   </BaseDialog.Popup>
                 </DialogProvider>
               </BaseDialog.Viewport>
             </BaseDialog.Portal>
           ) : null}
         </AnimatePresence>
       </BaseDialog.Root>
     );
   });
   
   export type DialogTitleProps = ComponentPropsWithoutRef<"h2">;
   
   /** The dialog's name. Base UI wires it to aria-labelledby. */
   export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(function DialogTitle({ className, ...rest }, ref) {
     return <BaseDialog.Title ref={ref} className={cn("text-pretty text-18 font-medium text-foreground", className)} {...rest} />;
   });
   
   export type DialogDescriptionProps = ComponentPropsWithoutRef<"p">;
   
   /** What happens if the person goes ahead. Base UI wires it to aria-describedby. */
   export const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(function DialogDescription({ className, ...rest }, ref) {
     return <BaseDialog.Description ref={ref} className={cn("text-pretty text-14 text-secondary", className)} {...rest} />;
   });
   
   export type DialogCloseProps = ButtonProps;
   
   /** A Button that closes the dialog. Secondary by default; pass variant, size or icon like any Button. */
   export const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(function DialogClose(
     { variant = "secondary", size = "md", icon, iconEnd, loading, ...rest },
     ref,
   ) {
     return (
       <BaseDialog.Close
         ref={ref}
         render={(props) => <Button {...(props as ButtonProps)} variant={variant} size={size} icon={icon} iconEnd={iconEnd} loading={loading} />}
         {...(rest as ComponentPropsWithoutRef<"button">)}
       />
     );
   });
   
   export type DialogActionsLabels = {
     cancel: string;
     error: string;
   };
   
   export type DialogActionsProps = ComponentPropsWithoutRef<"div"> & {
     /** Label of the main action, as a verb: "Delete workspace". When set, the actions render Cancel, then this button. */
     confirm?: string;
     /** Runs on the main action. Return a promise and the button shows pending; the dialog closes when it resolves and stays open if it throws. */
     onConfirm?: () => void | Promise<void>;
     /** Leave the dialog open after onConfirm resolves. */
     keepOpen?: boolean;
     /** Copy overrides for Cancel and the error line. */
     labels?: Partial<DialogActionsLabels>;
   };
   
   const defaultActionLabels: DialogActionsLabels = {
     cancel: "Cancel",
     error: "That did not go through. Try again.",
   };
   
   /**
    * The button row. It sticks to the bottom while long content scrolls, and stacks full width
    * on narrow screens with the main action on top.
    */
   export const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(function DialogActions(
     { confirm, onConfirm, keepOpen = false, labels: labelsProp, className, children, ...rest },
     ref,
   ) {
     const { variant, close, cancelRef, setPending } = useDialogContext("DialogActions");
     const labels = { ...defaultActionLabels, ...labelsProp };
     const [pending, setPendingState] = useState(false);
     const [error, setError] = useState(false);
   
     const run = async () => {
       if (pending) return;
       setError(false);
       setPendingState(true);
       setPending(true);
       try {
         await onConfirm?.();
         setPending(false);
         setPendingState(false);
         if (!keepOpen) close();
       } catch {
         setPending(false);
         setPendingState(false);
         setError(true);
       }
     };
   
     return (
       <div
         ref={ref}
         data-slot="dialog-actions"
         data-pending={pending ? "" : undefined}
         className={cn("sticky -bottom-6 -mx-6 -mb-6 mt-4 flex flex-col gap-3 bg-surface-raised px-6 pb-6 pt-2", className)}
         {...rest}
       >
         <p className={cn("text-14 text-danger", !error && "sr-only")} aria-live="polite">
           {error ? labels.error : ""}
         </p>
         <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end [&>*]:w-full sm:[&>*]:w-auto">
           {children}
           {confirm ? (
             <>
               <DialogClose ref={cancelRef} aria-disabled={pending || undefined}>
                 {labels.cancel}
               </DialogClose>
               <Button variant={variant === "danger" ? "danger" : "primary"} loading={pending} onClick={() => void run()}>
                 {confirm}
               </Button>
             </>
           ) : null}
         </div>
       </div>
     );
   });

4. 4

   Check that your global stylesheet imports the foundation, after Tailwind.

   app/globals.cssCopy

   @import "tailwindcss";
   @import "../components/pixilui/foundation.css";