Sheet

Extends Dialog to slide content in from a screen edge. Prefer side="start" / "end" — SonoJS resolves them with getStartSide / getEndSide so position and slide animation match writing direction.

Basic

Default opens from the inline end edge (right in LTR, left in RTL).

Installation

CLI

npx @sonojs/ui@latest add sheet

Also needsnpm i lucide-react tw-animate-css

Composition

structure

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

Usage

sheet.tsx

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Are you absolutely sure?</SheetTitle>
          <SheetDescription>This action cannot be undone.</SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="outline">Close</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Direction

Default is side="end" (inline end: right in LTR, left in RTL). Use physical left / right only when the edge must stay fixed.

sides.tsx

import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"

// Prefer logical edges — they follow writing direction.
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open from end</Button>
  </SheetTrigger>
  <SheetContent side="end">…</SheetContent>
</Sheet>

// Physical left / right never flip (escape hatch).
<Sheet>
  <SheetContent side="right">…</SheetContent>
</Sheet>

Props

Prop	Type	Default	Description
side	"top" · "bottom" · "left" · "right" · "start" · "end"	"end"	On `SheetContent` — prefer `start`/`end` for RTL; `left`/`right` stay physical.
showCloseButton	boolean	true	On `SheetContent` — show the corner close control.
open	boolean	—	On `Sheet` — controlled open state.
onOpenChange	(open: boolean) => void	—	Called when open state changes.