Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/sheet.json

Usage

Use sheets for side or edge panels. Default side is right.

import { Button } from "@/components/button/button";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/sheet/sheet";

export function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here.
          </SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Pass side (top | right | bottom | left) on SheetContent. Set showCloseButton={false} to hide the corner close control.