> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sheet

> Drawer-style panel that slides in from screen edges.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/sheet-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=e40e20fb5fdb1ecde3455d4dea967921" alt="Sheet component preview (light)" width="240" data-path="images/ui/sheet-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/sheet.tsx`

## When to use

* Secondary surfaces for settings, filters, or context details.
* Use right/left edges for app side panels; top/bottom for mobile drawers.

## Usage

```tsx sabo/src/components/ui/sheet.tsx theme={null}
import {
  Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild><Button>Open sheet</Button></SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Account</SheetTitle>
          <SheetDescription>Make changes to your profile here.</SheetDescription>
        </SheetHeader>
        {/* body */}
        <SheetFooter>
          <Button variant="outline">Cancel</Button>
          <Button>Save</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}
```

## Key props

<ParamField path="SheetContent.side" type="string" default="right">
  <code>top</code> | <code>right</code> | <code>bottom</code> | <code>left</code>
</ParamField>

<ParamField path="SheetContent.closeIconSize" type="string" default="size-4">
  Controls the close icon size utility.
</ParamField>

<Note>
  This component forwards all props from Radix Dialog primitives (Root/Trigger/Content, etc.). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/dialog](https://www.radix-ui.com/primitives/docs/components/dialog)
</Note>

## Styling tip

* Right/left sheets have fixed widths; use <code>sm:max-w-sm</code> overrides for custom sizes.
* Keep body content scrollable and put actions in <code>SheetFooter</code>.

## Accessibility

* Uses dialog semantics with overlay and focus trapping.