Sheet

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Notification settings</Button>
  </SheetTrigger>
  <SheetOverlay />
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Notifications</SheetTitle>
      <SheetDescription>
        Choose what you want to hear about. Changes apply right away.
      </SheetDescription>
    </SheetHeader>
    <div class="grid gap-5 py-5">
      <div class="flex items-center justify-between gap-4">
        <div>
          <Label for="notify-comments">Comments</Label>
          <p class="text-sm text-muted-foreground">When someone replies to you.</p>
        </div>
        <Switch id="notify-comments" checked />
      </div>
      <div class="flex items-center justify-between gap-4">
        <div>
          <Label for="notify-mentions">Mentions</Label>
          <p class="text-sm text-muted-foreground">When someone mentions you.</p>
        </div>
        <Switch id="notify-mentions" checked />
      </div>
      <div class="flex items-center justify-between gap-4">
        <div>
          <Label for="notify-digest">Weekly digest</Label>
          <p class="text-sm text-muted-foreground">A summary every Monday.</p>
        </div>
        <Switch id="notify-digest" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose>
        <Button>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

A left sheet is the classic mobile menu. Make the content a flex column so the footer pins to the bottom.

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Menu</Button>
  </SheetTrigger>
  <SheetOverlay />
  <SheetContent side="left" class="flex flex-col">
    <SheetHeader>
      <SheetTitle>bearnie</SheetTitle>
    </SheetHeader>
    <nav class="grid gap-1 py-4 text-sm">
      <a href="#" class="rounded-md bg-accent px-3 py-2 font-medium">Home</a>
      <a href="#" class="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">Components</a>
      <a href="#" class="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">Themes</a>
      <a href="#" class="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">Changelog</a>
    </nav>
    <SheetFooter class="mt-auto">
      <SheetClose>
        <Button class="w-full">Sign in</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Shopping cart

A right sheet with a pinned summary and checkout button.

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Cart (3)</Button>
  </SheetTrigger>
  <SheetOverlay />
  <SheetContent class="flex flex-col">
    <SheetHeader>
      <SheetTitle>Your cart</SheetTitle>
      <SheetDescription>3 items</SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 divide-y py-4">
      <div class="flex items-start justify-between gap-4 pb-4">
        <div>
          <p class="text-sm font-medium">Wool sweater</p>
          <p class="text-sm text-muted-foreground">Navy · M</p>
        </div>
        <p class="text-sm font-medium">$89.00</p>
      </div>
      <div class="flex items-start justify-between gap-4 pb-4">
        <div>
          <p class="text-sm font-medium">Canvas tote</p>
          <p class="text-sm text-muted-foreground">Natural</p>
        </div>
        <p class="text-sm font-medium">$32.00</p>
      </div>
      <div class="flex items-start justify-between gap-4">
        <div>
          <p class="text-sm font-medium">Leather belt</p>
          <p class="text-sm text-muted-foreground">Brown · 32</p>
        </div>
        <p class="text-sm font-medium">$54.00</p>
      </div>
    </div>
    <div class="mt-auto space-y-4 border-t pt-4">
      <div class="flex items-center justify-between text-sm">
        <span class="text-muted-foreground">Subtotal</span>
        <span class="font-medium">$175.00</span>
      </div>
      <SheetFooter>
        <SheetClose>
          <Button class="w-full">Checkout</Button>
        </SheetClose>
      </SheetFooter>
    </div>
  </SheetContent>
</Sheet>

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>

Floating

floating detaches the panel from the screen edges with a margin, rounded corners, and a full border. Works with every side.

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Floating right</Button>
  </SheetTrigger>
  <SheetOverlay />
  <SheetContent floating>
    <SheetHeader>
      <SheetTitle>Floating panel</SheetTitle>
      <SheetDescription>
        Detached from the edges with rounded corners.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Floating bottom</Button>
  </SheetTrigger>
  <SheetOverlay />
  <SheetContent side="bottom" floating>
    <SheetHeader>
      <SheetTitle>Floating bottom panel</SheetTitle>
      <SheetDescription>
        The same treatment works on any side.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

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 - Layout-neutral wrapper; any element inside it closes the sheet on click

Props

SheetContent

Prop	Type	Default	Description
side	“top” \| “right” \| “bottom” \| “left”	“right”	Edge of screen to slide from
floating	boolean	false	Detach the panel from the edges with margins and rounded corners
showCloseButton	boolean	true	Show the X close button
class	string	-	Additional CSS classes