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
Menus, popovers and tooltips (Desktop)
Desktop packOverlays and feedback
Desktop dropdowns, submenus, context menus, popovers, tooltips, toggletips, hover cards and coachmark tours.
- components
- 10
- variants
- 37
- recreations
- 4
- themes
- 5
Also for mobile: Menus, popovers and tooltips
What’s inside
Ten overlay patterns for web apps: dropdown, submenu, checkable and context menus, overflow menus, form popovers, tooltips, toggletips, hover cards and coachmark tours. Menus and popovers use slots, so you can edit items and fields without detaching. Each page documents keyboard and screen reader behaviour, motion and when to use each overlay.
- Edit menu items and popover fields without detaching
- Shortcuts, sections, descriptions and destructive items
- 4 recreations of real product menus
Dropdown menu
Free sample4 variants
- Icons and shortcuts
- Sections
- Descriptions
- Disabled and destructive
Submenu
3 variants
Checkable menu
3 variants
Context menu
3 variants
Overflow menu
3 variants
Form popover
3 variants
Tooltip
8 variants
Toggletip
3 variants
Hover card
3 variants
Coachmark tour
4 variants
- Figma file
- SuperDuper Pack: Menus, popovers and tooltips (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 3 UI elements and 1 screen pattern
- Context menu, Action sheet, Tooltip & coach mark and Action menu
How Linear, Figma and Notion 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 tracker context menu
Recreated from Linear
Design tool context menu
Recreated from Figma
Docs workspace block menu
Recreated from Notion
Desktop menu bar
Recreated from macOS
Not affiliated with, endorsed or sponsored by Linear, Figma, Notion and macOS. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the dropdown menu full size, free
A dropdown menu with icons and shortcuts, sections, descriptions, and disabled and destructive items. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More overlays and feedback packs
Dialogs, sheets and modals
Desktop10 components35 variants4 recreations
Desktop dialogs in four sizes, confirms, form dialogs, side sheets, tearsheets, full-screen modals and scrims.
$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 menus, popovers and tooltips pack
One Figma file: SuperDuper Pack: Menus, popovers and tooltips (Desktop). It has 10 components with 37 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.