📖 Step 3: Design - UI Components & Patterns#72 / 291
Bottom Sheet
Bottom Sheet
📖One-line summary
A mobile panel that slides up from the bottom of the screen.
✨Example
Click the button to raise the bottom sheet
⚡Vibe coding prompt examples
>_
Build a bottom sheet that slides up from the bottom on mobile. Allow drag-to-resize and pull-down to close.
>_
Build a bottom sheet that shows filter options. Allow choosing category, price range, and sort, with apply/reset buttons.
>_
Set snap points on the bottom sheet. Have it stop at 25%, 50%, and 100% screen height and auto-snap based on the drag gesture.
Try these prompts in your AI coding assistant!