Dialog Wrapper

DialogWrapper is a convenience component built on top of Radix UI's Dialog. It provides a structured layout with optional header, scrollable content area, and footer — handling all the boilerplate so you can focus on content.

Installation

pnpm --filter @hoag/ui build

Usage

import { DialogWrapper } from "@hoag/ui/dialog-wrapper";
import { Button } from "@hoag/ui/components/button";
 
export default function Demo() {
  return (
    <DialogWrapper
      trigger={<Button variant="outline">Open Dialog</Button>}
      title="Edit profile"
      description="Update your profile details"
      showFooter
      footerContent={<Button>Save</Button>}
    >
      <div>Dialog content</div>
    </DialogWrapper>
  );
}

Default

<DialogWrapper
  trigger={<Button variant="outline">Open Dialog</Button>}
  title="Dialog Title"
  description="This is the dialog description."
>
  <div>Dialog content goes here.</div>
</DialogWrapper>

With Footer

<DialogWrapper
  trigger={<Button>Edit Profile</Button>}
  title="Edit Profile"
  description="Make changes to your profile below."
  showFooter
  footerContent={
    <div className="flex gap-2">
      <Button size="sm">Save changes</Button>
      <Button variant="outline" size="sm">
        Cancel
      </Button>
    </div>
  }
>
  <div>Form fields go here.</div>
</DialogWrapper>

Without Header

<DialogWrapper
  trigger={<Button variant="ghost">Minimal Dialog</Button>}
  showHeader={false}
  showFooter
  footerContent={<Button>Close</Button>}
>
  <div>A clean dialog without a header section.</div>
</DialogWrapper>

API Reference

Props

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	Element that opens the dialog when clicked
`title`	`string`	—	Dialog header title
`description`	`string`	—	Dialog header description
`showHeader`	`boolean`	`true`	Whether to render the header section
`showFooter`	`boolean`	`false`	Whether to render the footer section
`footerContent`	`ReactNode`	—	Content placed in the footer
`hasCloseButton`	`boolean`	`true`	Show/hide the close (×) button
`autoHeight`	`boolean`	`false`	Auto-height on desktop instead of fixed max-height
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`children`	`ReactNode`	—	Scrollable main content area

Sheet Wrapper Alert Dialog Wrapper