Wensity

Dialog

Accessible modal dialogs in default, confirmation, form, fullscreen, and scrollable layouts for any focused task.

dialogmodaloverlayconfirmationformaccessible
Loading preview

Examples

Practical examples and common states for the same installable component.

Default

Standard centered modal for everyday settings and edits.

examples/dialog-default.tsx
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/wensity/dialog";


export function DefaultDialog() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Notification preferences</DialogTitle>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Confirmation

Destructive or high-stakes actions with icon and dual CTAs.

Requires: button

examples/dialog-confirmation.tsx
import { DialogConfirmation } from "@/components/wensity/dialog";
import { Button } from "@/components/wensity/button";


export function ConfirmationDialog() {
  return (
    <DialogConfirmation
      trigger={<Button variant="destructive">Delete</Button>}
      title="Delete this item?"
      description="This cannot be undone."
      confirmLabel="Delete"
      destructive
    />
  );
}

Form

Wider layout optimized for multi-field input flows.

examples/dialog-form.tsx
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/wensity/dialog";


export function FormDialog() {
  return (
    <Dialog>
      <DialogTrigger>Invite</DialogTrigger>
      <DialogContent variant="form">
        <DialogHeader>
          <DialogTitle>Invite teammate</DialogTitle>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Fullscreen

Edge-to-edge modal for immersive editing experiences.

examples/dialog-fullscreen.tsx
import { Dialog, DialogContent, DialogTrigger } from "@/components/wensity/dialog";


export function FullscreenDialog() {
  return (
    <Dialog>
      <DialogTrigger>Open editor</DialogTrigger>
      <DialogContent variant="fullscreen" />
    </Dialog>
  );
}

Scrollable

Sticky header and footer with a scrolling body region.

examples/dialog-scrollable.tsx
import { Dialog, DialogContent, DialogScrollBody, DialogTrigger } from "@/components/wensity/dialog";


export function ScrollableDialog() {
  return (
    <Dialog>
      <DialogTrigger>Browse</DialogTrigger>
      <DialogContent variant="scrollable">
        <DialogScrollBody>{/* long list */}</DialogScrollBody>
      </DialogContent>
    </Dialog>
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add dialog

Usage

Import Dialog from @/components/wensity/dialog and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/wensity/dialog";


export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Title</DialogTitle>
          <DialogDescription>Description</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Props

PropTypeDefaultDescription
openboolean-Controlled open state.
defaultOpenboolean-Initial open state when uncontrolled.
onOpenChange(open: boolean) => void-Called when the dialog opens or closes.
modalbooleantrueTraps focus and blocks interaction with the page behind.