Skip to main content

​
Overview

Edit user profile
Update the user’s information below.
Ahmad Dani
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.
For mobile bottom-sheet patterns, prefer Drawer. Sheet is optimized for desktop side-panel interactions.

​
Installation

npm install @araf-ds/core

​
Usage

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="[email protected]" />
        </div>
        <SheetFooter>
          <Button>Save changes</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

​
Variants

​
Right Slide (Default)

Ideal for detail panels, edit forms, and contextual actions. 
<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="[email protected]" />
    </div>
    <SheetFooter>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

​
Left Slide (Navigation)

<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)

​
open
boolean
Controlled open state.
​
onOpenChange
(open: boolean) => void
Callback fired when the open state changes.
​
defaultOpen
boolean
default:"false"
Uncontrolled default open state.

​
SheetContent

​
side
string
default:"right"
Which edge the sheet slides from. Values: left · right · top · bottom
​
size
string
default:"md"
Panel width (for left/right) or height (for top/bottom). Values: sm · md · lg · xl · full
​
className
string
Additional Tailwind classes for custom overrides.

​
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

Do

  • 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

Don't

  • 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