> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Drawer

> A bottom sheet panel that slides up from the bottom of the screen — optimized for mobile and touch interactions.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"center"}}>
  <div style={{width:"320px",background:"#fff",borderRadius:"16px 16px 0 0",boxShadow:"0 -4px 24px rgba(0,0,0,0.12)",padding:"0 0 16px"}}>
    <div style={{display:"flex",justifyContent:"center",padding:"12px 0"}}>
      <div style={{width:"36px",height:"4px",borderRadius:"2px",background:"#D0D5DD"}} />
    </div>

    <div style={{padding:"0 20px 16px",borderBottom:"1px solid #F4F4F5"}}>
      <div style={{fontSize:"16px",fontWeight:600,color:"#101828",fontFamily:"Inter,sans-serif"}}>Filter results</div>
      <div style={{fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif",marginTop:"4px"}}>Narrow down your search results.</div>
    </div>

    <div style={{padding:"16px 20px",display:"flex",flexDirection:"column",gap:"12px"}}>
      <div style={{display:"flex",alignItems:"center",gap:"10px"}}>
        <div style={{width:"18px",height:"18px",borderRadius:"50%",border:"1.5px solid #0479CE",background:"#0479CE",display:"flex",alignItems:"center",justifyContent:"center"}}>
          <div style={{width:"6px",height:"6px",borderRadius:"50%",background:"#fff"}} />
        </div>

        <span style={{fontSize:"14px",color:"#344054",fontFamily:"Inter,sans-serif"}}>Last 7 days</span>
      </div>

      <div style={{display:"flex",alignItems:"center",gap:"10px"}}>
        <div style={{width:"18px",height:"18px",borderRadius:"50%",border:"1.5px solid #D0D5DD",background:"#fff"}} />

        <span style={{fontSize:"14px",color:"#344054",fontFamily:"Inter,sans-serif"}}>Last 30 days</span>
      </div>
    </div>

    <div style={{padding:"0 20px",display:"flex",flexDirection:"column",gap:"8px"}}>
      <button style={{padding:"10px",borderRadius:"8px",background:"#0479CE",color:"#fff",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none",cursor:"pointer",width:"100%"}}>Apply filters</button>
      <button style={{padding:"10px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#fff",color:"#52525B",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif",cursor:"pointer",width:"100%"}}>Cancel</button>
    </div>
  </div>
</div>

**Drawer** is a mobile-first overlay panel that slides up from the bottom edge of the viewport. Use it for mobile action sheets, quick filters, and detail views.

<Note>
  For side-sliding panels on desktop, use `Sheet` instead. Drawer is optimized for bottom-sheet patterns.
</Note>

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Filter results</DrawerTitle>
          <DrawerDescription>Narrow down your search results.</DrawerDescription>
        </DrawerHeader>
        <div className="px-4 py-2">
          {/* filter content */}
        </div>
        <DrawerFooter>
          <Button>Apply filters</Button>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

***

## Variants

### Basic Drawer

```tsx theme={null}
<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Filter results</DrawerTitle>
      <DrawerDescription>Narrow down your search results.</DrawerDescription>
    </DrawerHeader>
    <div className="px-4 py-2">{/* filter content */}</div>
    <DrawerFooter>
      <Button>Apply filters</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

### With Snap Points

```tsx theme={null}
<Drawer snapPoints={[0.4, 0.9]}>
  <DrawerContent>
    {/* Snaps to 40% then 90% of viewport height */}
  </DrawerContent>
</Drawer>
```

### Controlled

```tsx theme={null}
const [open, setOpen] = useState(false);

<Drawer open={open} onOpenChange={setOpen}>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Item details</DrawerTitle>
    </DrawerHeader>
    {/* content */}
  </DrawerContent>
</Drawer>
```

***

## API Reference

### Drawer (Root)

<ParamField path="open" type="boolean">
  Controlled open state.
</ParamField>

<ParamField path="onOpenChange" type="(open: boolean) => void">
  Callback fired when the open state changes.
</ParamField>

<ParamField path="shouldScaleBackground" type="boolean" default="true">
  Scales the background app content when the drawer opens.
</ParamField>

<ParamField path="snapPoints" type="number[]">
  Snap point heights as percentages (0–1). The drawer snaps to these heights on drag.
</ParamField>

### DrawerContent

<ParamField path="className" type="string">
  Additional Tailwind classes for custom overrides.
</ParamField>

***

## Accessibility

* Drawer uses `role="dialog"` with `aria-modal="true"`
* Focus is trapped inside the drawer while open
* Pressing Escape closes the drawer
* The drag handle has `aria-label="Drag handle"` for screen readers
* Focus returns to the trigger when the drawer closes

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use Drawer for mobile action sheets and quick filters
    * Always include a clear close action (Cancel button or swipe down)
    * Use `snapPoints` for Drawers with variable content height
    * Keep drawer content focused on a single task
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use Drawer for desktop-primary layouts — use Sheet or Modal
    * Don't stack drawers inside other drawers
    * Don't put complex multi-step forms in a Drawer
    * Don't rely on the drag-to-close gesture as the only close mechanism
  </Card>
</CardGroup>