Wensity

Dialog

Accessible modal dialogs for forms, confirmations, and focused tasks.

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