Sheet

A panel that slides in from any edge of the screen. Ideal for settings, filters and detail views.

Playground

Tweak the props, the preview and the code follow.

Props

side

inset

showCloseButton

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Environment variables</SheetTitle>
      <SheetDescription>Encrypted at rest, injected at build time.</SheetDescription>
    </SheetHeader>
    <SheetBody>…</SheetBody>
    <SheetFooter>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Installation

npx @plumsydev/plum-ui add sheet

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes and save.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Sides

Use side to pick the edge.

Inset

A floating panel detached from the edge with inset. Mark items as read and watch the list reflow.

API Reference

Sheet

Prop	Type	Default
`open` Controlled open state.	`boolean`	`—`
`onOpenChange` Called when the open state changes.	`(open: boolean) => void`	`—`

SheetContent

Prop	Type	Default
`side` Edge the panel slides in from.	`"top" \| "right" \| "bottom" \| "left"`	`"right"`
`inset` Floats the panel with a margin and rounded corners.	`boolean`	`false`
`showCloseButton` Renders the close button in the corner.	`boolean`	`true`

Notes

Need drag-to-dismiss on mobile? Reach for the Drawer instead.
Wrap long content in SheetBody: it takes the remaining height and scrolls on its own.

PreviousSeparator NextSkeleton