SayUI
← Library→ Turn this into a prompt
Overlays & feedback

Drawer / Side Sheet

A panel that slides in from an edge, usually over a scrim, for secondary tasks.

Also known as side panel · side sheet · slide-over

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Drawer / Side Sheet".

Add a right-side drawer (side sheet): slides in over a scrim, traps focus, closes on Esc and scrim click, has a sticky title bar with close, and scrolls its body independently.

Anatomy:
- panel: Fixed edge, full height or inset; carries its own scroll.
- scrim: Optional but common; click-to-dismiss when the task is light.
- header: Title plus close control; keep sticky while body scrolls.

Preferred API / pattern: `shadcn Sheet / Vaul Drawer`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: No focus trap
  • ○Avoid: Body scroll still moves the page under the drawer
  • ○Avoid: Using a full modal when the user only needs a narrow inspect panel
  • ○Avoid: Mobile left drawer fighting the thumb zone

In plain wordsHow people search for it

“the panel that slides in from the side of the screen”“that side menu that covers half the page”“settings that slide out from the right without leaving the page”

AnatomyOpen for part names

panel
Fixed edge, full height or inset; carries its own scroll.
scrim
Optional but common; click-to-dismiss when the task is light.
header
Title plus close control; keep sticky while body scrolls.

How to write itOpen for stack patterns

Web (HTML/CSS)dialog[aria-modal] + transform translate
React + Tailwind + shadcn/uishadcn Sheet / Vaul Drawer
SwiftUI.sheet / NavigationSplitView detail
Ant Design<Drawer open placement="right">

Notes

Drawers keep context visible on large screens better than full-page routes. Prefer left for navigation, right for detail/inspect. On mobile a bottom sheet is often clearer than a narrow side drawer. Always trap focus and restore it to the trigger.

Help me choose: Modal vs Drawer →Help me choose: Drawer vs Bottom sheet →

Common mistakesHumans and models trip here

  • No focus trap: Tab escapes into the page behind the drawer.
  • Body scroll still moves the page under the drawer: lock document overflow while open.
  • Using a full modal when the user only needs a narrow inspect panel: prefer a drawer.
  • Mobile left drawer fighting the thumb zone: consider a bottom sheet instead.

More failure symptoms on AI broke it.

Related patterns

Modal DialogA centered window that blocks the page until the user responds.Bottom SheetA panel that rises from the bottom edge—common on mobile for actions and details.Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.

Spotted a wrong name or missing pattern?

Message on X