For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Sheet

PreviousNext

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

import { Button } from "@/components/button/button";
import { Input } from "@/components/input/input";
import {
  Sheet,
  SheetClose,
  SheetContent,

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/sheet.json

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet/sheet";
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Composition

Use the following composition to build a Sheet:

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter
        └── SheetClose

Examples

Side

Use the side prop on SheetContent to set which edge the sheet slides from: top, right, bottom, or left.

import { Button } from "@/components/button/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";
import { Button } from "@/components/button/button";
import { Input } from "@/components/input/input";

API Reference

See the Base UI Dialog documentation for the full API reference.