Command palette
Desktop11 components29 variants4 recreations
Desktop command palettes: Command K, nested pages, scoped tabs, preview, Ask AI, cheat sheet and quick switcher.
$9, or included with Pro
Editors and toolbars (Desktop)
Desktop packDomain
Desktop rich-text and bubble toolbars, slash menus, block rows, canvas tools, inspectors, layers panels and version history.
- components
- 13
- variants
- 45
- recreations
- 4
- themes
- 5
Also for mobile: Editors and toolbars
What’s inside
Thirteen desktop editing patterns: rich-text and bubble toolbars, a slash menu, draggable block rows, a markdown editor, edit in place, a canvas tool bar, inspector, layers panel and zoom controls, code editor chrome, version history and comment mode. States cover dragging, renaming, saving, unsaved and errors. Every page is documented, with a live grid and an in-context scene in light and dark.
- Text editor and design canvas patterns in one file
- Block rows with drag, drop line and keyboard moves
- Recreations of Notion, Google Docs, Figma and GitHub editors
Rich-text toolbar
3 variants
- Full
- Narrow
- Read only
Bubble toolbar
Free sample3 variants
- Format
- Link
- Turn into
Slash menu
3 variants
- Empty
- Filtered
- No results
Block row
5 variants
- Default
- Hover
- Dragging
- Drop line
- Moved by keys
Markdown editor
3 variants
- Write
- Preview
- Uploading
Edit in place
5 variants
- Read
- Hover
- Editing
- Saving
- Invalid
Canvas tool bar
4 variants
- Floating bottom
- Left rail
- Move
- Pen
Inspector
3 variants
- Nothing
- One layer
- Several layers
Layers panel
4 variants
- Default
- Layer selected
- Renaming
- Search
Zoom controls
3 variants
- Default
- Menu open
- At maximum
Code editor chrome
3 variants
- Saved
- Unsaved
- Error
Version history
3 variants
- List
- Previewing
- Restored
Comment mode
3 variants
- Off
- On
- Composing
- Figma file
- SuperDuper Pack: Editors and toolbars (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 1 UI element and 2 screen patterns
- Toolbar, Create & compose and Edit
How Notion, Google Docs and Figma 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.
Block editor
Recreated from Notion
Docs editor
Recreated from Google Docs
Design tool
Recreated from Figma
Code review comment
Recreated from GitHub
Not affiliated with, endorsed or sponsored by Notion, Google Docs, Figma and GitHub. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the bubble toolbar full size, free
A floating bubble toolbar for selected text, with format, link and turn into views. All 3 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More domain packs
Notifications and inbox
Desktop8 components36 variants4 recreations
Desktop notification bell and popover, inbox page, row types, snooze, preferences matrix, email digest and empty inbox.
$9, or included with Pro
Commerce and product pages
Desktop18 components76 variants3 recreations
Desktop product galleries, buy boxes, variant pickers, quick view, carts, reviews, comparison tables and store headers.
$9, or included with Pro
Questions about the editors and toolbars pack
One Figma file: SuperDuper Pack: Editors and toolbars (Desktop). It has 13 components with 45 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.