Shadcn Sheet

React sheet for settings, filters, and side panels. Built with TypeScript and Tailwind CSS for Next.js using Base UI — slides from any edge with a focus trap.

A sheet is a dialog that slides in from an edge. Use it for settings, filters, a cart, or a mobile nav — work that sits next to the page instead of covering it. If they only pick yes or no, that is an Alert Dialog.

Scroll to load preview...

Looking for a neobrutalism version for shadcn?

Same sheet, thicker borders. The NeoBrutalism sheet is the kit if you want that look.

Usage

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

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Put render={<Button />} on the trigger so the Button is the actual control. side on SheetContent is top, right, bottom, or left — default is right. SheetTitle is required.

Composition

SheetTrigger

SheetTitle

SheetDescription

SheetTrigger and SheetClose take render.

Keyboard

Key	Action
`Space` / `Enter`	Open from the trigger, or fire the focused button
`Escape`	Close and return focus to the trigger
`Tab` / `Shift + Tab`	Cycle controls inside the sheet

Focus stays in the overlay until it closes. Title and description are announced.