Sheet
A flyout that opens from the side of the screen, based on the dialog component.
Installation
pnpm dlx shadcn@latest add @columbus/sheetUsage
import {
Sheet,
SheetClose,
SheetDescription,
SheetFooter,
SheetHeader,
SheetPanel,
SheetPopup,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
<SheetPopup side="right">
<SheetHeader>
<SheetTitle>Title</SheetTitle>
<SheetDescription>Description</SheetDescription>
</SheetHeader>
<SheetPanel>Content</SheetPanel>
<SheetFooter>
<SheetClose render={<Button variant="ghost" />}>Close</SheetClose>
</SheetFooter>
</SheetPopup>
</Sheet>;Always include a SheetTitle. Screen readers use it as the sheet's name.
Sides
Use side to choose the edge the sheet opens from.
Inset
variant="inset" leaves a gap around the sheet and rounds its corners on
larger screens.
API reference
Sheet is built on Base UI Dialog,
so every part accepts the props of its Base UI Dialog counterpart. SheetPopup
is also exported as SheetContent. For a sheet you can swipe to close, use
Drawer.
SheetPopup
Prop
Type
SheetFooter
Prop
Type
SheetPanel
Prop
Type