Skip to content

Sheet

A panel from an edge, for filters, settings or details beside the page. Start and end flip in right-to-left pages.

Sourcecomponents/sheet.tsx

Sides

A filter panel

Right to left

Usage

Sheet usage
import { Button } from "@/components/button";import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/sheet";
export function SheetUsage() {  return (    <Sheet>      <SheetTrigger render={<Button variant="outline" />}>Filters</SheetTrigger>      <SheetContent side="end">        <SheetHeader>          <SheetTitle>Filters</SheetTitle>          <SheetDescription>Narrow the list of briefs.</SheetDescription>        </SheetHeader>        <SheetBody>…</SheetBody>        <SheetFooter>          <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>          <Button>Apply</Button>        </SheetFooter>      </SheetContent>    </Sheet>  );}

When to use

Use when

A side panel over the page on any screen: filters, settings, a record's details. side is start, end, top or bottom

Don’t use when

App navigation (Sidebar has its own sheet); a centered task (use Dialog)