> ## 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.

# Drawer

> Vaul-based drawer overlay for panels and mobile navigation.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/LH5aXxXQjZcsU-Hh/images/ui/drawer-light.png?fit=max&auto=format&n=LH5aXxXQjZcsU-Hh&q=85&s=90c5fd9d048c236cc73200e30b4303c6" alt="Drawer component preview (light)" width="300" data-path="images/ui/drawer-light.png" />
</Frame>

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

## When to use

* Show contextual panels without leaving the page.
* Use for mobile nav, filters, details, or quick actions.

## Usage

```tsx theme={null}
import { Drawer, DrawerTrigger, DrawerContent, DrawerClose } from "@/components/ui/drawer";

export function Example() {
  return (
    <Drawer>
      <DrawerTrigger className="rounded-md border px-3 py-1.5">Open</DrawerTrigger>
      <DrawerContent>
        <div className="p-4">Drawer content</div>
        <div className="p-4">
          <DrawerClose className="rounded-md border px-3 py-1.5">Close</DrawerClose>
        </div>
      </DrawerContent>
    </Drawer>
  );
}
```

## Key props

<ParamField path="DrawerContent">
  Main panel container. Direction and animations are handled by Vaul; content styling via Tailwind.
</ParamField>

<ParamField path="DrawerTrigger">
  Click target to open the drawer.
</ParamField>

<ParamField path="DrawerClose">
  Click target to close the drawer.
</ParamField>

<ParamField path="DrawerOverlay">
  Backdrop overlay behind the drawer.
</ParamField>

<ParamField path="DrawerPortal">
  Portal root for overlay/content.
</ParamField>

<ParamField path="DrawerHeader/DrawerFooter">
  Header/footer container sections inside content.
</ParamField>

<ParamField path="DrawerTitle/DrawerDescription">
  Title and description text wrappers.
</ParamField>

<Note>
  This component forwards all props from vaul Drawer primitives (Root/Trigger/Content/Close, etc.). Above are commonly used props. For the full API, see the vaul docs: [https://vaul.emilkowal.ski/](https://vaul.emilkowal.ski/)
</Note>

## Styling tip

Add padding inside `DrawerContent` and maintain visible focus states.

```tsx theme={null}
<DrawerContent className="p-4">...</DrawerContent>
```

## Accessibility

* Drawer traps focus inside when open; escape key dismisses it.
* Ensure the trigger has a descriptive label; use `aria-label` if needed.