# Sheet

> A dialog that slides in from a screen edge (side drawer).

_Updated: 2026-06-04_

A dialog that slides in from a screen edge (side drawer).

## Installation

```bash
railbase ui add sheet
```

Peer dependencies:

```bash
npm install class-variance-authority
```

> [!NOTE]
> `railbase ui add` also copies shared primitives — they ship alongside this component automatically.

## Usage

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

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes, then save.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>
```

## Anatomy

Exported parts: `Sheet` · `SheetTrigger` · `SheetClose` · `SheetPortal` · `SheetOverlay` · `SheetContent` · `SheetHeader` · `SheetFooter` · `SheetTitle` · `SheetDescription`