Sheet

Extends Dialog to display complementary content sliding in from the edge of the screen, built on Radix Dialog.

Install

npx shadcn@latest add https://atomx.acau.net/r/sheet.json

Usage

Use Sheet to surface auxiliary content — settings, filters, navigation — without leaving the page. The side prop on SheetContent controls which edge the panel slides from (top, right, bottom, left). Defaults to right.

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
    {/* body */}
    <SheetFooter>
      <SheetClose asChild>
        <Button>Save</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Preview

Right side

Props

SheetContent extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> plus:

Sheet extends Radix Dialog.Root — open, defaultOpen, onOpenChange, modal.