Action Sheet
The bottom sheet that presents options or confirmations without leaving the current screen.
Navigation & Command · 8 checks · 9 resources
Before you ship
8- 01Heading and actions — a clear heading outlining the purpose, along with the relevant actions the user can select
- 02Swipe or backdrop dismiss — dismissible by dragging down or tapping the dimmed area behind it, plus the expected close button
- 03Destructive action styling — delete, remove or block styled in red and positioned last, separated from safe actions
- 04Cancel action — a clearly labelled option that dismisses the sheet without taking any action
- 05Snap points (if expandable) — defined positions the sheet expands or compresses to, with a drag handle indicating it is expandable
- 06Content scrollability — decide what stays pinned on scroll so the sheet remains contextual; avoid scrolling where possible
- 07Keyboard relation — sheet size and responsiveness when the keyboard is triggered while it is active
- 08Backdrop dimming — the screen behind darkened to draw focus to the action sheet
Resources that help you build this
9- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web code
- Radix UI · Unstyled accessible React primitives, plus Themes, Colors and Icons
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture
- Base UI · 37 unstyled React components from the Radix, Floating UI and MUI teams
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4
- Liquid Gooey · React gooey-merge and liquid-trail effects that keep text, icons and shadows crisp
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- morphicons · Six kilobytes of maths that morph any stroke icon into any other, across Lucide, Heroicons and Tabler
- React Native Components · 64 copy-paste React Native screen components, $59.99 once for lifetime access