# Sheet (/docs/components/sheet)



<ComponentPreview name="sheet-demo" />

## Overview [#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 [#anatomy]

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

## Behavior [#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 [#accessibility]

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

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add sheet
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="sheet" title="components/ui/sheet.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

```tsx
<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 [#examples]

The example shows sheet placement from different screen edges.

### Side sheets [#side-sheets]

<ComponentPreview name="sheet-position" />