Overlays & feedback

Bottom Sheet

Q: How do people describe a Bottom Sheet in plain words?

the card that slides up from the bottom of the phone that half-screen menu I can drag down to close the thing Apple Maps uses when you pick a place

Q: How do I implement a Bottom Sheet?

Implement a mobile bottom sheet: slides up from the bottom with a drag handle, optional half/full detents, scrim behind, closes on drag-down or scrim click, and traps focus while open.

A panel that rises from the bottom edge—common on mobile for actions and details.

Also known as action sheet · sheet · pull-up panel

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 "Bottom Sheet".

Implement a mobile bottom sheet: slides up from the bottom with a drag handle, optional half/full detents, scrim behind, closes on drag-down or scrim click, and traps focus while open.

Anatomy:
- drag handle: Optional grabber that signals the sheet can be dismissed by drag.
- sheet surface: Rounded top corners; height often snaps to detents (peek / half / full).
- scrim: Usually present; dimmed background dismisses light sheets.

Preferred API / pattern: `Vaul / shadcn Drawer (bottom)`

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

Acceptance checks

○Avoid: Sheet height jumps with keyboard open
○Avoid: Drag-to-close fights nested scroll
○Avoid: Using a bottom sheet for a dense desktop settings form

In plain wordsHow people search for it

“the card that slides up from the bottom of the phone”“that half-screen menu I can drag down to close”“the thing Apple Maps uses when you pick a place”

AnatomyOpen for part names

drag handle: Optional grabber that signals the sheet can be dismissed by drag.
sheet surface: Rounded top corners; height often snaps to detents (peek / half / full).
scrim: Usually present; dimmed background dismisses light sheets.

How to write itOpen for stack patterns

Web (HTML/CSS)dialog + transform translateY + touch drag

React + Tailwind + shadcn/uiVaul / shadcn Drawer (bottom)

SwiftUI.sheet / .presentationDetents

Ant Design<Drawer placement="bottom">

Notes

Bottom sheets win on phones because the thumb already lives at the bottom. Use detents for peek vs full content. Don't put critical form fields only in a tiny peek state. On desktop, a modal or right drawer is usually better than a fake phone sheet.

Help me choose: Drawer vs Bottom sheet →

Common mistakesHumans and models trip here

Sheet height jumps with keyboard open: account for visualViewport / safe-area.
Drag-to-close fights nested scroll: only dismiss when content is scrolled to top.
Using a bottom sheet for a dense desktop settings form: switch to modal or side drawer.

More failure symptoms on AI broke it.

Related patterns

Drawer / Side SheetA panel that slides in from an edge, usually over a scrim, for secondary tasks.Modal DialogA centered window that blocks the page until the user responds.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