StacklyUI
Components/Sheet

Sheet

A panel that slides in from an edge.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
render(
  <Sheet>
    <SheetTrigger asChild><Button variant="outline">Open sheet</Button></SheetTrigger>
    <SheetContent side="right">
      <SheetHeader>
        <SheetTitle>Edit profile</SheetTitle>
        <SheetDescription>Make changes and save when you're done.</SheetDescription>
      </SheetHeader>
      <div className="space-y-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" defaultValue="Soumyajit" />
      </div>
      <SheetClose asChild><Button className="mt-2">Save changes</Button></SheetClose>
    </SheetContent>
  </Sheet>
)
02

Examples

Common variations — edit any of them live.

Left side

playground.tsx
render(
  <Sheet>
    <SheetTrigger asChild><Button variant="outline">From left</Button></SheetTrigger>
    <SheetContent side="left">
      <SheetHeader><SheetTitle>Navigation</SheetTitle></SheetHeader>
      <nav className="grid gap-1 text-sm">
        <a className="rounded-lg px-3 py-2 hover:bg-surface-strong" href="#">Dashboard</a>
        <a className="rounded-lg px-3 py-2 hover:bg-surface-strong" href="#">Projects</a>
        <a className="rounded-lg px-3 py-2 hover:bg-surface-strong" href="#">Settings</a>
      </nav>
    </SheetContent>
  </Sheet>
)
03

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/sheet

Or install the package and import it:

$pnpm add @stacklyui/ui motion
04

Usage

Import Sheet from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.