Layout UI

Sheet

Slide-in panel from any screen edge. Built on Base UI Dialog with directional slide animations. Supports top, right, bottom, and left sides.

Preview

Installation

bash
npx shadcn@latest add @layout/sheet

Usage

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

Examples

Left side

All sides

Guidelines for AI agents

Use for secondary panels, settings, navigation drawers, and filter sidebars that extend or supplement the main view without interrupting the full workflow. Right is the default side for settings and detail panels; left for navigation; bottom for mobile-optimised action lists (prefer Drawer for touch swipe-to-dismiss); top is rarely used.

Never

  • Neveruse Sheet for critical confirmations — use AlertDialog
  • Neveruse Sheet for focused task flows requiring full attention — use Dialog
  • Neverrender a Sheet wider than half the viewport on desktop; content should remain scannable
  • Neveromit SheetTitle; it is the accessible name of the dialog region

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-border--layout-shadow-lg--layout-radius--layout-duration-slow--layout-ring