Fanvue API Documentation

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogTitle,
  DialogTrigger,
} from "@fanvue/ui";
import type {
  DialogBodyProps,
  DialogCloseProps,
  DialogContentProps,
  DialogDescriptionProps,
  DialogFooterProps,
  DialogHeaderProps,
  DialogOverlayProps,
  DialogProps,
  DialogTitleProps,
  DialogTriggerProps,
} from "@fanvue/ui";

Examples

Default

import {
  Button,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  TextArea,
} from "@fanvue/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Text</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <TextArea placeholder="Type something…" fullWidth />
    </DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Cancel</Button>
      </DialogClose>
      <Button>Accept</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Large (600px)

import {
  Button,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@fanvue/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent size="lg">
    <DialogHeader>
      <DialogTitle>Team Roles</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <DialogDescription>Assign roles to team members to manage access.</DialogDescription>
      <div className="mt-4 space-y-3">
        {["Owner", "Team Manager", "Chatter"].map((role) => (
          <div
            key={role}
            className="flex items-center justify-between rounded-sm border border-neutral-alphas-200 p-4"
          >
            <span className="typography-body-default-16px-semibold text-content-primary">
              {role}
            </span>
            <span className="typography-body-small-14px-regular text-content-secondary">
              Permissions
            </span>
          </div>
        ))}
      </div>
    </DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Cancel</Button>
      </DialogClose>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

With Header Description

import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@fanvue/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Assign creator</DialogTitle>
      <DialogDescription>Choose a creator to assign to this account.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Cancel</Button>
      </DialogClose>
      <Button>Assign</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Simple Default

import {
  Button,
  CheckIcon,
  Dialog,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@fanvue/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent size="md">
    <DialogHeader showClose={false}>
      <DialogTitle>Your funds are on the way!</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <p className="typography-body-default-16px-regular text-content-secondary">Remember:</p>
      <ul className="mt-3 space-y-2">
        <li className="typography-body-default-16px-regular flex items-start gap-2 text-content-secondary">
          <CheckIcon className="mt-0.5 size-5 shrink-0 text-content-primary" />
          <span>
            It could take up to{" "}
            <strong className="text-content-primary">10 working days</strong>
          </span>
        </li>
        <li className="typography-body-default-16px-regular flex items-start gap-2 text-content-secondary">
          <CheckIcon className="mt-0.5 size-5 shrink-0 text-content-primary" />
          <span>Your provider could charge you a fee</span>
        </li>
      </ul>
    </DialogBody>
    <DialogFooter>
      <Button>Got it</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

With Trigger

import {
  Button,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@fanvue/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <DialogDescription>
        Dialog body text goes here. Describe the content or provide information to the user.
      </DialogDescription>
    </DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Cancel</Button>
      </DialogClose>
      <Button>Accept</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

Dialog

Root component that manages open/close state for a dialog. A direct re-export of the Radix DialogPrimitive.Root primitive. It accepts all of that primitive’s props, unchanged.

DialogBody

Scrollable content area (slot) between the header and footer. Grows to fill available space and scrolls when content overflows. Takes no props of its own. Accepts all standard div attributes, including className.

DialogClose

Convenience alias for Radix Dialog.Close. Closes the dialog when clicked. A direct re-export of the Radix DialogPrimitive.Close primitive. It accepts all of that primitive’s props, unchanged.

DialogContent

The dialog panel. Includes the overlay by default and portals to document.body by default. Set portal={false} to keep overlay and content in the DOM subtree of the parent Dialog. fixed positioning still applies; ancestors with transform or overflow may affect layout. On mobile viewports (<640px), the dialog slides up from the bottom as a sheet with top-only border radius by default; pass mobilePresentation="card" to render a centered floating card instead (used for small confirmation dialogs). On larger viewports it renders centered with full border radius.

boolean

"sheet" | "card"

default:"sheet"

How the dialog presents below the sm breakpoint.

"sheet" — bottom sheet pinned to the viewport bottom edge (default)
"card" — centered floating card per the v2-modal confirmation spec: 16px side margins, 24px padding, 32px radius on all corners, no pull handle

boolean

default:"true"

When true, renders overlay automatically.

DialogOverlayProps

Props forwarded to the default DialogOverlay when overlay is true.

boolean

default:"true"

When true, teleports overlay and panel to document.body. When false, renders inline in the React tree (useful inside theme providers or scoped containers).

boolean

default:"true"

Show the v2 mobile sheet pull handle. Only rendered when mobilePresentation is "sheet".

"md" | "sm" | "lg"

default:"md"

Width preset for the dialog.

"sm" — 400px max-width (confirmations, simple forms)
"md" — 440px max-width (default, standard dialogs)
"lg" — 600px max-width (complex content, tables)

DialogDescription

Accessible description for the dialog. Rendered as secondary text.

boolean

DialogFooter

Footer bar for the dialog. Typically contains action buttons. Children are laid out in a horizontal row with equal flex-basis. Takes no props of its own. Accepts all standard div attributes, including className.

DialogHeader

Header bar for the dialog. Renders the title with an optional back arrow and close button.

string

default:"Go back"

Accessible label for the back button.

string

default:"Close"

Accessible label for the close button.

(() => void)

Called when the back button is clicked.

boolean

Show a back arrow button on the left side. Defaults to true when onBack is provided.

boolean

default:"true"

Show the close (X) button in the header.

DialogOverlay

Semi-transparent backdrop rendered behind the dialog content. Rendered by DialogContent; portaled to document.body when DialogContent portal is true.

boolean

DialogTitle

Accessible title for the dialog. Must be rendered inside DialogHeader or directly within DialogContent.

boolean

DialogTrigger

The element that opens the dialog when clicked. On touch / pen, a press-and-release that crosses a small movement threshold is treated as a drag and the resulting synthetic click is suppressed — defends against Android Chrome opening the dialog on a scroll-drag-end. Accepts all props of the underlying Radix DialogPrimitive.Trigger primitive, plus className.

Exported types

Also exported from @fanvue/ui: DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOverlayProps, DialogProps, DialogTitleProps, DialogTriggerProps.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

Dialog

Examples

Default

Large (600px)

With Header Description

Simple Default

With Trigger

Props

Dialog

DialogBody

DialogClose

DialogContent

DialogDescription

DialogFooter

DialogHeader

DialogOverlay

DialogTitle

DialogTrigger

Exported types

​Examples

​Default

​Large (600px)

​With Header Description

​Simple Default

​With Trigger

​Props

​Dialog

​DialogBody

​DialogClose

​DialogContent

​DialogDescription

​DialogFooter

​DialogHeader

​DialogOverlay

​DialogTitle

​DialogTrigger

​Exported types

Examples

Default

Large (600px)

With Header Description

Simple Default

With Trigger

Props

Dialog

DialogBody

DialogClose

DialogContent

DialogDescription

DialogFooter

DialogHeader

DialogOverlay

DialogTitle

DialogTrigger

Exported types