Sheet

A slide-out side panel that extends from the edge of the screen, commonly used for filters, navigation, or supplementary content.

Preview

Usage

tsx
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "zostel-ui";

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Sheet</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
      <SheetDescription>
        Refine your hostel search
      </SheetDescription>
    </SheetHeader>
    <div className="py-4">
      {/* Sheet content here */}
    </div>
    <SheetFooter>
      <Button variant="outline">Reset</Button>
      <Button>Apply Filters</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Props

side
Type: "top" | "right" | "bottom" | "left"
Default: "right"

The edge of the screen the sheet slides in from

open
Type: boolean
Default: —

Controlled open state of the sheet

onOpenChange
Type: (open: boolean) => void
Default: —

Callback when the open state changes
Previous Dialog Next Drawer