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>
  );
}

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.