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

# Sheet

> A side-sliding overlay panel for contextual actions and detail views — slides from any edge of the screen.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"flex-end"}}>
  <div style={{width:"280px",background:"#fff",boxShadow:"-4px 0 24px rgba(0,0,0,0.1)",borderRadius:"12px 0 0 12px",padding:"0",minHeight:"260px",display:"flex",flexDirection:"column"}}>
    <div style={{padding:"20px 20px 16px",borderBottom:"1px solid #F4F4F5",display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
      <div>
        <div style={{fontSize:"16px",fontWeight:600,color:"#101828",fontFamily:"Inter,sans-serif"}}>Edit user profile</div>
        <div style={{fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif",marginTop:"4px"}}>Update the user's information below.</div>
      </div>

      <button style={{background:"none",border:"none",cursor:"pointer",color:"#71717A",fontSize:"18px",padding:"0",lineHeight:"1"}}>✕</button>
    </div>

    <div style={{padding:"16px 20px",display:"flex",flexDirection:"column",gap:"12px",flex:1}}>
      <div style={{display:"flex",flexDirection:"column",gap:"4px"}}>
        <label style={{fontSize:"12px",fontWeight:500,color:"#344054",fontFamily:"Inter,sans-serif"}}>Full name</label>
        <div style={{border:"1px solid #D0D5DD",borderRadius:"6px",padding:"8px 10px",fontSize:"13px",color:"#101828",fontFamily:"Inter,sans-serif"}}>Ahmad Dani</div>
      </div>

      <div style={{display:"flex",flexDirection:"column",gap:"4px"}}>
        <label style={{fontSize:"12px",fontWeight:500,color:"#344054",fontFamily:"Inter,sans-serif"}}>Email</label>
        <div style={{border:"1px solid #D0D5DD",borderRadius:"6px",padding:"8px 10px",fontSize:"13px",color:"#101828",fontFamily:"Inter,sans-serif"}}>[ahmad@example.com](mailto:ahmad@example.com)</div>
      </div>
    </div>

    <div style={{padding:"12px 20px",borderTop:"1px solid #F4F4F5"}}>
      <button style={{padding:"9px 14px",borderRadius:"8px",background:"#0479CE",color:"#fff",fontSize:"13px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none",cursor:"pointer",width:"100%"}}>Save changes</button>
    </div>
  </div>
</div>

**Sheet** slides in from the left, right, top, or bottom edge of the viewport. Use it for navigation drawers, detail side panels, edit forms, and filter panels where the user should maintain context of the underlying page.

<Note>
  For mobile bottom-sheet patterns, prefer `Drawer`. Sheet is optimized for desktop side-panel interactions.
</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 {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Edit user</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit user profile</SheetTitle>
          <SheetDescription>Update the user's information below.</SheetDescription>
        </SheetHeader>
        <div className="py-6 space-y-4">
          <Input label="Full name" defaultValue="Ahmad Dani" />
          <Input label="Email" defaultValue="ahmad@example.com" />
        </div>
        <SheetFooter>
          <Button>Save changes</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

***

## Variants

### Right Slide (Default)

Ideal for detail panels, edit forms, and contextual actions.

```tsx theme={null}
<Sheet>
  <SheetTrigger asChild>
    <Button>Edit user</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit user profile</SheetTitle>
      <SheetDescription>Update the user's information below.</SheetDescription>
    </SheetHeader>
    <div className="py-6 space-y-4">
      <Input label="Full name" defaultValue="Ahmad Dani" />
      <Input label="Email" defaultValue="ahmad@example.com" />
    </div>
    <SheetFooter>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

### Left Slide (Navigation)

```tsx theme={null}
<Sheet>
  <SheetTrigger asChild>
    <Button variant="ghost" size="icon"><MenuIcon /></Button>
  </SheetTrigger>
  <SheetContent side="left" size="sm">
    <SheetHeader>
      <SheetTitle>Menu</SheetTitle>
    </SheetHeader>
    {/* nav items */}
  </SheetContent>
</Sheet>
```

***

## API Reference

### Sheet (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="defaultOpen" type="boolean" default="false">
  Uncontrolled default open state.
</ParamField>

### SheetContent

<ParamField path="side" type="string" default="right">
  Which edge the sheet slides from. Values: `left` · `right` · `top` · `bottom`
</ParamField>

<ParamField path="size" type="string" default="md">
  Panel width (for left/right) or height (for top/bottom). Values: `sm` · `md` · `lg` · `xl` · `full`
</ParamField>

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

***

## Accessibility

* Sheet uses `role="dialog"` with `aria-modal="true"`
* Focus is trapped inside the sheet while open
* Pressing Escape closes the sheet
* `SheetTitle` is linked via `aria-labelledby`
* `SheetDescription` is linked via `aria-describedby`
* Focus returns to the trigger when the sheet closes

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use Sheet for edit panels and detail views on desktop
    * Use `side="left"` for navigation drawers on mobile breakpoints
    * Include a visible close button in addition to the Escape key
    * Keep sheet content focused on a single entity or task
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use Sheet for full-screen takeover content — use Modal
    * Don't stack sheets inside other sheets
    * Don't use the default right sheet for navigation — use `side="left"`
    * Don't use Sheet for content that requires the user's undivided attention — use Modal
  </Card>
</CardGroup>