All components
Chewypixel component

Sheet

A side panel that slides in from any edge of the screen over a light overlay.

Installation

npx shadcn@latest add https://chewypixel.io/r/sheet.json

Usage

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

export function BagSheet() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">View bag</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Your bag</SheetTitle>
          <SheetDescription>Gumdrops, taffy and sour belts.</SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose asChild>
            <Button>Check out</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Props

open

Whether it's open, when controlled. Goes on Sheet.

boolean

onOpenChange

Called when it opens or closes. Goes on Sheet.

(open: boolean) => void

side

The edge it slides in from. Goes on SheetContent.

"top" | "right" | "bottom" | "left" = "right"

containerClassName

Classes for the box that positions the panel, such as a wider max width. Goes on SheetContent.

string

Released under the MIT License.

More components

See them in a real app

These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.