Sheet Wrapper

SheetWrapper is a convenience component built on top of Radix UI's Sheet. It provides structured header, scrollable content, and optional footer slots so you don't have to wire them manually.

Installation

1. Install the Sheet primitive via shadcn:

npx shadcn@latest add sheet

2. Copy the wrapper source:

Source: packages/ui/src/common/overlays/sheet-wrapper.tsx
Place in your project: components/common/overlays/sheet-wrapper.tsx
Required components: components/ui/sheet.tsx, lib/utils.ts

3. Update the import paths to match your project structure.

Usage

import { SheetWrapper } from "@hoag/ui/sheet-wrapper";
import { Button } from "@hoag/ui/components/button";
 
export default function Demo() {
  return (
    <SheetWrapper
      trigger={<Button>Open Sheet</Button>}
      title="Settings"
      description="Manage your preferences"
    >
      <div>Sheet content goes here.</div>
    </SheetWrapper>
  );
}

Default

<SheetWrapper
  trigger={<Button variant="outline">Open Sheet</Button>}
  title="Sheet Title"
  description="This is the sheet description."
>
  <div>Sheet content goes here.</div>
</SheetWrapper>

Sides

<SheetWrapper trigger={<Button>Top</Button>} title="Top Sheet" side="top">
  <p>Sheet slides from the top.</p>
</SheetWrapper>
<SheetWrapper trigger={<Button>Right</Button>} title="Right Sheet" side="right">
  <p>Sheet slides from the right.</p>
</SheetWrapper>
<SheetWrapper trigger={<Button>Bottom</Button>} title="Bottom Sheet" side="bottom">
  <p>Sheet slides from the bottom.</p>
</SheetWrapper>
<SheetWrapper trigger={<Button>Left</Button>} title="Left Sheet" side="left">
  <p>Sheet slides from the left.</p>
</SheetWrapper>

With Footer

<SheetWrapper
  trigger={<Button>Open with Footer</Button>}
  title="Edit Profile"
  description="Update your profile details below."
  showFooter
  footerContent={
    <div className="flex gap-2">
      <Button size="sm">Save changes</Button>
      <Button variant="outline" size="sm">
        Cancel
      </Button>
    </div>
  }
>
  <div>Edit form fields go here.</div>
</SheetWrapper>

API Reference

Props

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	Element that opens the sheet when clicked
`title`	`string`	—	Sheet header title
`description`	`string`	—	Sheet header description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Which side the sheet slides from
`showFooter`	`boolean`	`false`	Whether to render the footer section
`footerContent`	`ReactNode`	—	Content placed in the footer
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`children`	`ReactNode`	—	Scrollable main content area

Alert Dialog Drawer