Docs › Components › Sheet

Shadcn Sheet

The shadcn/ui Sheet is a panel that slides in from an edge of the screen, styled with Tailwind CSS v4. Built on Base UI, it traps focus and closes on Escape. Sheets power mobile navigation, filters, and carts across ShadcnStore blocks.

Key features

• Slides in from any edge via the side prop (top, right, bottom, left).
• Composable Trigger, Content, Header, Footer, and Close.
• Focus trap, Escape to close, and a dimmed overlay.
• Controlled or uncontrolled open state.
• Built on the same primitives as Dialog.

Installation

npx shadcn@latest add sheet

Usage

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

export function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Make changes to your profile here.</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

Choosing a side

Set which edge the sheet slides in from with the side prop on SheetContent: top, right (default), bottom, or left. Open each to compare.

<SheetContent side="left">…</SheetContent>   // mobile navigation
<SheetContent side="bottom">…</SheetContent> // mobile action panel

Composition

Use the render prop on SheetTrigger and SheetClose to compose with a Button. Put label text as children on the outer component:

<SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
<SheetClose render={<Button variant="ghost" />}>Close</SheetClose>

Accessibility

• Always include a SheetTitle, even if visually hidden, so the panel has an accessible name.
• Focus moves into the sheet on open and returns to the trigger on close.
• For a centered, blocking task, use a Dialog instead of a sheet.

When to use the Sheet

Use a Sheet for content that belongs to the side of the screen: mobile navigation, filter panels, a shopping cart, or a details drawer. For a centered, focused task use a Dialog; for a small anchored panel use a Popover.

Used in these blocks

• App shells: mobile navigation drawer.
• Shopping carts: slide-in cart.
• Category filters: mobile filter panel.

Related components

A Sheet is opened by a Button, often holds a Form or navigation, and shares primitives with the Dialog. For small anchored content use a Popover.

FAQ

What is the shadcn sheet used for?

The Sheet is a panel that slides in from an edge of the screen, used for mobile navigation, filters, carts, and side forms.

What is the difference between Sheet and Dialog?

Sheet slides in from an edge and suits side content and mobile navigation. Dialog is a centered modal for focused, blocking tasks.

How do I change which side the sheet opens from?

Set the side prop on SheetContent to top, right, bottom, or left.

How do I close the sheet after an action?

Control it with open/onOpenChange state and set it to false in your handler, or wrap a control in SheetClose.