Sheet

Overview

Use Sheet for a panel that slides in from the edge of the screen.

Sheets are useful for details panels, filters, side navigation, quick edit forms, carts, and secondary workflows that should keep the current page visible.

Anatomy

A sheet has a trigger, content panel, header, title, description, body, footer, and close action. It is based on the dialog pattern.

Behavior

Choose the side based on the workflow. Right-side sheets work well for details and editing. Left-side sheets work well for navigation. Bottom sheets can work well on smaller screens.

Accessibility

Provide a title, keep focus inside while open, and make sure focus returns to the trigger when closed.

Installation

npm

npx love-ui@latest add sheet

Usage

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

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

Examples

The example shows sheet placement from different screen edges.