Sheet

<Sheet>
<SheetTrigger>
  <Button variant="outline">Open Sheet</Button>
</SheetTrigger>
<SheetOverlay />
<SheetContent>
  <SheetHeader>
    <SheetTitle>Edit profile</SheetTitle>
    <SheetDescription>
      Make changes to your profile here. Click save when you're done.
    </SheetDescription>
  </SheetHeader>
  <div class="grid gap-4 py-4">
    <div class="grid grid-cols-4 items-center gap-4">
      <Label for="name" class="text-right">Name</Label>
      <Input id="name" value="John Doe" class="col-span-3" />
    </div>
    <div class="grid grid-cols-4 items-center gap-4">
      <Label for="username" class="text-right">Username</Label>
      <Input id="username" value="@johndoe" class="col-span-3" />
    </div>
  </div>
  <SheetFooter>
    <SheetClose>
      <Button type="submit">Save changes</Button>
    </SheetClose>
  </SheetFooter>
</SheetContent>
</Sheet>

Installation

npx bearnie add sheet

import Sheet from "@/components/ui/sheet/Sheet.astro";
import SheetTrigger from "@/components/ui/sheet/SheetTrigger.astro";
import SheetOverlay from "@/components/ui/sheet/SheetOverlay.astro";
import SheetContent from "@/components/ui/sheet/SheetContent.astro";
import SheetHeader from "@/components/ui/sheet/SheetHeader.astro";
import SheetTitle from "@/components/ui/sheet/SheetTitle.astro";
import SheetDescription from "@/components/ui/sheet/SheetDescription.astro";
import SheetFooter from "@/components/ui/sheet/SheetFooter.astro";
import SheetClose from "@/components/ui/sheet/SheetClose.astro";

Usage

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

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

<Sheet>
<SheetTrigger>
  <Button variant="outline">Menu</Button>
</SheetTrigger>
<SheetOverlay />
<SheetContent side="left" class="w-64">
  <SheetHeader>
    <SheetTitle>Navigation</SheetTitle>
  </SheetHeader>
  <nav class="flex flex-col gap-2 mt-4">
    <a href="#" class="block px-3 py-2 rounded-md hover:bg-muted">Home</a>
    <a href="#" class="block px-3 py-2 rounded-md hover:bg-muted">About</a>
    <a href="#" class="block px-3 py-2 rounded-md hover:bg-muted">Services</a>
    <a href="#" class="block px-3 py-2 rounded-md hover:bg-muted">Contact</a>
  </nav>
</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

Installation

Usage

Examples

Side positions

Without close button

Navigation menu

Anatomy

Props

SheetContent