Dialog — Frontfriend

Interactive preview

Built on Base UI. Component colors, typography and styling come from your Design System.

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

npx frontfriend download dialog -f react --primitive base --registry v4

Review dependencies reported by the downloader and keep your source changes in version control.

Usage & composition

Base UI owns the interaction mechanics. Prefer its native render composition. Frontfriend’s trigger adapters also accept the documented asChild compatibility form; do not assume every upstream Base UI primitive does.

import { Button } from '@/components/ui/button';
import {
  Dialog, DialogTrigger, DialogContent, DialogBody, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from '@/components/ui/dialog';

export function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Start something new</DialogTrigger>
      <DialogContent showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>A fresh start.</DialogTitle>
          <DialogDescription>Your next chapter begins here.</DialogDescription>
        </DialogHeader>
        <DialogBody><p>Build from the foundations you know.</p></DialogBody>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>Got it</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Controlled dialogs

Control open and onOpenChange on Dialog. Close only after a successful asynchronous action. Preserve the user’s input when validation fails.

Keep the title and description in the dialog composition. A complex form may need explicit initial focus and an associated error summary; test it in your application.

API reference

Frontfriend-owned props and selected target integration points. Native HTML and inherited primitive props remain documented by Base UI.

Prop / part	Type	Default	Purpose
`open`	boolean	`—`	Control the root’s open state.
`DialogContent.width`	xs \| sm \| md \| lg \| 3xl \| 5xl \| full \| fit	`md`	Select a configured modal width.
`DialogContent.height`	auto \| full	`auto`	Select a configured height.
`DialogContent.showCloseButton`	boolean	`true`	Include the configured close button.
`Dialog.disablePointerDismissal`	boolean	`false`	Native Base UI root prop: prevent outside press dismissal.
`DialogFooter.align`	end \| justify \| start \| stretch	`end`	Choose configured action alignment.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.

Accessibility

Include an accessible title and a useful description.
Check initial focus, focus containment and focus restoration.
Test Escape and outside dismissal in the real product context.
Use an alert dialog for decisions that require explicit acknowledgement; do not silently change a dialog’s role.