Dots

Sheet

PreviousNext

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 @dots/sheet

Usage

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

Composition

Use the following composition to build a Sheet:

SheetTrigger
├── Button
└── Sheet
    ├── 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,

API Reference

See the React Aria Modal documentation.