Logo of UI Challenges
Sign in
Wireframe example for Bottom Sheet with Detents
An example interpretation of the prompt
Icon of target

Bottom Sheet with Detents

Icon of book open

Design a mobile bottom sheet that snaps between three detents: peek, half, and full screen. It should feel native to touch, with clear grab affordance and motion that explains where the sheet can land.

The sheet sits above the current screen and the background dims as it expands. The dimming should help separate the sheet from what’s behind it without making the underlying screen feel lost.

This is a navigation pattern, so the sheet needs to support moving from lightweight preview to deeper interaction without forcing a full page transition. Each detent should feel intentional, not like a random stop.

Focus on how content density changes across the three positions. The same sheet may need to reveal only a teaser at peek, a useful subset at half, and the full task or destination at full height.

Icon of book open

Make the drag handle and top edge visually distinct enough that people know the sheet can be pulled before they try to scroll the content inside it.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.