Sheet

Extends the Sheet component to display content that complements the main content of the screen.

Dependencies

@radix-ui/react-dialog (opens in a new tab) - Sheet is built on top of Dialog Primitive.

Anatomy

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
    // ....
  </SheetContent>
</Sheet>

Usage

Positions

The Sheet component can be positioned in different ways. By default, it will be positioned at the right of the screen. You can also position it at the top, left or bottom of the screen.

With border

Add Separator component to add a border like variant between the header, content & footer.

API Reference

To see the full API docs of Sheet component visit Shadcn/ui (opens in a new tab).

Popover Tooltip