Sheet | Bearnie

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Open quick panel</Button>
  </SheetTrigger>
  <SheetOverlay />
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Project quick actions</SheetTitle>
      <SheetDescription>
        Review key details and trigger common actions in one place.
      </SheetDescription>
    </SheetHeader>
    <div class="space-y-4 py-4">
      <div class="space-y-2">
        <Label for="project-name">Project name</Label>
        <Input id="project-name" value="Website redesign" />
      </div>
      <div class="space-y-2">
        <Label for="project-owner">Owner</Label>
        <Input id="project-owner" value="Product Team" />
      </div>
      <div class="grid grid-cols-2 gap-2 pt-1">
        <Button variant="outline">Share link</Button>
        <Button variant="outline">Duplicate</Button>
      </div>
    </div>
    <SheetFooter>
      <SheetClose>
        <Button type="submit">Done</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Installation

npx bearnie add sheet

Usage

import {
  Sheet,
  SheetTrigger,
  SheetOverlay,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose
} from "@/components/bearnie/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetOverlay />
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>Sheet description goes here.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Side positions

<div class="flex flex-wrap gap-2">
  <Sheet>
    <SheetTrigger><Button variant="outline">Top</Button></SheetTrigger>
    <SheetOverlay />
    <SheetContent side="top">
      <SheetHeader>
        <SheetTitle>Top Sheet</SheetTitle>
        <SheetDescription>This sheet slides in from the top.</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
  <Sheet>
    <SheetTrigger><Button variant="outline">Right</Button></SheetTrigger>
    <SheetOverlay />
    <SheetContent side="right">
      <SheetHeader>
        <SheetTitle>Right Sheet</SheetTitle>
        <SheetDescription>This sheet slides in from the right.</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
  <Sheet>
    <SheetTrigger><Button variant="outline">Bottom</Button></SheetTrigger>
    <SheetOverlay />
    <SheetContent side="bottom">
      <SheetHeader>
        <SheetTitle>Bottom Sheet</SheetTitle>
        <SheetDescription>This sheet slides in from the bottom.</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
  <Sheet>
    <SheetTrigger><Button variant="outline">Left</Button></SheetTrigger>
    <SheetOverlay />
    <SheetContent side="left">
      <SheetHeader>
        <SheetTitle>Left Sheet</SheetTitle>
        <SheetDescription>This sheet slides in from the left.</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</div>

Without close button

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetOverlay />
  <SheetContent showCloseButton={false}>
    <SheetHeader>
      <SheetTitle>No close button</SheetTitle>
      <SheetDescription>
        Click outside or press Escape to close this sheet.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Anatomy

Sheet - Root container that manages state
SheetTrigger - Button that opens the sheet
SheetOverlay - Background overlay
SheetContent - The sliding panel
SheetHeader - Header container
SheetTitle - Title text
SheetDescription - Description text
SheetFooter - Footer container
SheetClose - Button that closes the sheet

Props

SheetContent

Prop	Type	Default	Description
side	”top” \| “right” \| “bottom” \| “left"	"right”	Edge of screen to slide from
showCloseButton	boolean	true	Show the X close button
class	string	-	Additional CSS classes