shadcn-syntax-sheet

name	shadcn-syntax-sheet
description	Use when building a side panel, slide-in drawer, off-canvas navigation, filter panel, settings tray, or any container that enters from the top, right, bottom, or left edge of the viewport in shadcn ui. Prevents the common mistakes of omitting SheetTitle (Radix a11y violation), choosing Sheet on mobile where Drawer would feel native, using side="bottom" Sheet where Drawer is the documented mobile-first pattern, and overriding SheetContent styles in a way that breaks the slide-in animation. Covers the side prop (top, right, bottom, left), the eight exported primitives (Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription), controlled vs uncontrolled state (open + onOpenChange forwarded to the Radix Dialog primitive), showCloseButton prop on SheetContent, Sheet-vs-Dialog decision, and Sheet-vs-Drawer decision. Keywords: shadcn sheet, side panel, drawer-style dialog, SheetContent, SheetTitle, SheetTrigger, SheetClose, SheetDescription, navigation menu sheet, settings sheet, filter panel sheet, side="left" sheet, side="right" sheet, side="bottom" sheet, side="top" sheet, off-canvas panel, slide-in panel, Sheet vs Dialog, Sheet vs Drawer, how do I make a side panel, how do I make a slide-in drawer, sheet not showing, sheet missing title warning, sheet animation not working, showCloseButton sheet, sheet a11y warning, sheet describedby, mobile navigation drawer, responsive side panel.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

shadcn-syntax-sheet

Sheet is a Dialog-derivative styled to slide in from one of the four viewport edges. It wraps the same Radix Dialog primitive as shadcn-syntax-dialog, so the state model, a11y rules, and controlled-vs-uncontrolled semantics are identical. The only meaningful additions on top of Dialog are: the side prop on SheetContent (which swaps the slide-in animation and the fixed-position classes) and the renamed exports.

Quick Reference

Minimal Sheet (defaults to side="right"):

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

export function FiltersSheet() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open filters</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Filters</SheetTitle>
          <SheetDescription>
            Narrow the result list. Changes apply immediately.
          
        
        {/* body content */}
        
          
            Done
          
        
      
    
  )
}