Menus, popovers and tooltips
Desktop10 components37 variants4 recreations
Desktop dropdowns, submenus, context menus, popovers, tooltips, toggletips, hover cards and coachmark tours.
$9, or included with Pro
Dialogs, sheets and modals (Desktop)
Desktop packOverlays and feedback
Desktop dialogs in four sizes, confirms, form dialogs, side sheets, tearsheets, full-screen modals and scrims.
- components
- 10
- variants
- 35
- recreations
- 4
- themes
- 5
Also for mobile: Dialogs, sheets and modals
What’s inside
Ten desktop overlay patterns: dialog sizes, confirm dialogs including type to confirm, form dialogs, sticky footers, nested dialogs, a session timeout warning, side sheets, tearsheets, a full-screen takeover and scrims. Dialog content sits in editable slots, so nothing needs detaching. Every page documents use, anatomy, keyboard and screen reader behaviour, with a live grid in light and dark.
- Type to confirm and checkbox confirm dialogs for destructive actions
- Session timeout dialog with a live countdown
- Recreations of Linear, Stripe, GitHub and Notion dialogs
Dialog sizes
4 variants
- Small
- Medium
- Large
- Full
Confirm dialog
Free sample8 variants
- Destructive
- Default
- Type to confirm
- With checkbox
- Focus
Form dialog
4 variants
- Empty
- Filled
- Invalid
- Saving
Dialog with sticky footer
3 variants
- Top
- Middle
- End
Nested dialog
2 variants
- 1
- 2
Session timeout dialog
3 variants
- Warning
- Last seconds
- Signed out
Side sheet
3 variants
- Filters
- Details
- Navigation
Tearsheet
2 variants
- Wide
- Narrow
Full-screen modal
3 variants
- Default
- Unsaved
- Saving
Scrim
3 variants
- Modal
- Busy
- Non-modal
- Figma file
- SuperDuper Pack: Dialogs, sheets and modals (Desktop)
- 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 Linear, Stripe and GitHub and others 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.
Issue composer
Recreated from Linear
Refund dialog
Recreated from Stripe
Danger zone confirm
Recreated from GitHub
Page side peek
Recreated from Notion
Not affiliated with, endorsed or sponsored by Linear, Stripe, GitHub and Notion. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the confirm dialog full size, free
Destructive, default, type to confirm and checkbox confirm dialogs, each with a focus state. All 8 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More overlays and feedback packs
Empty, error and success states
Desktop11 components28 variants3 recreations
Desktop empty tables, first runs, no results, 404 and 500 pages, access requests, maintenance and success states.
$9, or included with Pro
Feedback: toasts, banners, progress, loading
Desktop12 components60 variants3 recreations
Desktop feedback patterns: toast stacks, page banners, messages, flags, status icons, progress bars, spinners and skeletons.
$9, or included with Pro
Questions about the dialogs, sheets and modals pack
One Figma file: SuperDuper Pack: Dialogs, sheets and modals (Desktop). It has 10 components with 35 variants, 4 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.