Bottom Sheet
A panel that slides up from the bottom of the screen to show secondary content or actions without leaving the current context.
Plain English
Bottom sheets are native to mobile interfaces — iOS action sheets, Android Material sheets — and have migrated into web apps as mobile browsing increased. They work because human thumbs reach the bottom of the screen more comfortably than the top or center. They are used for filter panels, share menus, contextual actions, and detail views. Compared to a centered modal, a bottom sheet feels less disruptive on mobile — it slides in from a familiar direction and the user can see part of the original content above it. It should always be dismissable by tapping the dimmed backdrop or swiping the sheet downward.
Technical
CSS: position: fixed; bottom: 0; left: 0; right: 0; transform: translateY(100%) (closed); transform: translateY(0) (open); transition: transform 300ms ease-out. Max height: 85vh with overflow-y: auto. Drag handle: a 36×4px pill centered at the top. Backdrop: position: fixed; inset: 0; background: rgba(0,0,0,0.5). Safe area: padding-bottom: env(safe-area-inset-bottom) for iOS notch devices.
Live Demo
Bottom sheet
Filter options
Bottom sheets feel native on mobile — thumbs reach the bottom, and they don't block the full screen.
Usage
✓ Good usage
A "Share" button that slides up a bottom sheet listing share options — the user can act without navigating away, and can dismiss with a single tap on the backdrop.
✗ Bad usage
A bottom sheet used on desktop for a complex multi-step form — on large screens it looks out of place and wastes the available width compared to a centered modal.
Recommended values
- Open transition: translateY(100%) → translateY(0), 300ms ease-out
- Max height: 80–85vh
- Drag handle: 36px × 4px pill, background #e2e8f0
- Backdrop: rgba(0,0,0,0.4–0.6)
- Dismiss threshold: 60–80px swipe down
- Safe area padding: env(safe-area-inset-bottom)
Common mistakes
- No swipe-to-dismiss — users on mobile expect to be able to drag the sheet down to close it.
- Opening without trapping focus — keyboard users can tab out of the sheet into the content behind it.
- Missing safe-area-inset-bottom — the drag handle and buttons sit behind the iOS home indicator on notched devices.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add a bottom sheet for the filter options panel. Slide it up with translateY transition (300ms ease-out). Include a drag handle at the top, a semi-transparent backdrop, and close-on-backdrop-click. Trap keyboard focus inside the sheet when open. Add swipe-to-dismiss detecting 60px downward drag. Add padding-bottom: env(safe-area-inset-bottom).