Empty, error and success states
Mobile12 components29 variants2 recreations
12 mobile empty, error and success screens, from first use and offline to update required and caught up.
$9, or included with Pro
Dialogs, sheets and modals (Mobile)
Mobile packOverlays and feedback
Mobile bottom sheets, alerts, modals, context menus and scrims, with detents, drag states and working prototypes.
- components
- 14
- variants
- 70
- recreations
- 3
- themes
- 5
Also for desktop: Dialogs, sheets and modals
What’s inside
Fourteen mobile overlay patterns: bottom, scrollable, form, picker, action and nested sheets, custom alerts, illustration, announcement and full-screen modals, a context menu and a scrim. Sets cover detents, scroll, depth and dragging, with pressed, focus, disabled and loading from the nested controls. A Motion page has sheet and dialog animation styles and clickable prototypes.
- Medium and large detents with a 44px grabber target
- Six sheet and dialog animation styles plus clickable prototypes
- Recreations of Uber, Apple Maps and Airbnb sheets
Bottom sheet
Free sample6 variants
- Medium
- Large
- Default
- Dragging
- Focus
Sheet grabber
3 variants
- Default
- Pressed
- Focus
Scrollable sheet
6 variants
- Medium
- Large
- Top
- Scrolled
- End
Sheet with sticky CTA
9 variants
- Single
- Double
- Summary
- Default
- Disabled
- Loading
Form sheet
8 variants
- Nav actions
- Footer button
- Empty
- Filled
- Invalid
- Saving
Picker sheet
4 variants
- Single
- Multi
- Default
- Changed
Action sheet
4 variants
- Title off
- Title on
- Destructive false
- Destructive true
Nested sheets
3 variants
- 1
- 2
- 3
Custom alert
8 variants
- Two
- One
- Stacked
- Destructive
- Default
- Focus
Modal with illustration
4 variants
- Centred
- Sheet
- Illustration
- Icon
Announcement modal
3 variants
- What's new
- Feature
- Paged
Full-screen modal
6 variants
- Close
- Cancel and save
- Default
- Scrolled
- Unsaved
Context menu
3 variants
- Actions
- With preview
- With submenu
Scrim
3 variants
- Dimmed
- Dragging 50%
- Undimmed
- Figma file
- SuperDuper Pack: Dialogs and sheets (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 4 UI elements and 1 screen pattern
- Dialog, Bottom sheet, Full-screen modal, Scrim and Confirmation
How Uber, Apple Maps and Airbnb do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Ride options
Recreated from Uber
Place sheet
Recreated from Apple Maps
Booking review
Recreated from Airbnb
Not affiliated with, endorsed or sponsored by Uber, Apple Maps and Airbnb. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the bottom sheet full size, free
A bottom sheet at medium and large detents with its grabber, in default, dragging and focus states. All 6 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More overlays and feedback packs
Feedback: toasts, banners, progress, loading
Mobile14 components53 variants3 recreations
Mobile feedback patterns: snackbars, undo toasts, banners, callouts, loading states, skeletons and progress bars and rings.
$9, or included with Pro
Menus, popovers and tooltips
Mobile8 components25 variants2 recreations
Mobile action sheets, context menus, pull-downs, popovers, tooltips, coach marks, edit menus and quick actions.
$9, or included with Pro
Questions about the dialogs, sheets and modals pack
One Figma file: SuperDuper Pack: Dialogs and sheets (Mobile). It has 14 components with 70 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.