Sheet

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

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/sheet.json

Usage

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/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

Side

Use the side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.

import { Button } from "@/components/ui/button"
import {
  Sheet,

No Close Button

Use showCloseButton={false} on SheetContent to hide the close button.

import { Button } from "@/components/ui/button"
import {
  Sheet,

RTL

To enable RTL support, see the RTL configuration guide.

"use client"

import {

API Reference

See the Base UI Dialog documentation.

Separator Sidebar

On This Page

Installation Usage Composition Side No Close Button RTL API Reference