Skip to content
Try free

Notifications and inbox (Desktop)

Desktop packDomain

Desktop notification bell and popover, inbox page, row types, snooze, preferences matrix, email digest and empty inbox.

components
8
variants
36
recreations
4
themes
5

Also for mobile: Notifications and inbox

What’s inside

Eight notification patterns for web apps: a bell with its popover, a full inbox page, notification rows for each type, read and unread, mark all read with undo, row actions such as snooze and archive, a preferences matrix, an email digest and empty inbox states. Each page documents keyboard and screen reader behaviour, motion and when to use it.

  • Unread shown by a dot and a heavier title, not colour alone
  • Snooze menu, archive and mark all read with undo
  • 4 recreations of real product inboxes
  • Bell popover, every variant

    Bell popover

    5 variants

    • All
    • Unread
    • Paused
    • Empty
    • Grouped
  • Inbox page, every variant

    Inbox page

    2 variants

  • Notification row, every variant

    Notification row

    Free sample

    12 variants

  • Mark all read, every variant

    Mark all read

    4 variants

  • Row actions, every variant

    Row actions

    4 variants

  • Preferences matrix, every variant

    Preferences matrix

    3 variants

  • Email digest, every variant

    Email digest

    2 variants

  • Empty inbox, every variant

    Empty inbox

    4 variants

Figma file
SuperDuper Pack: Notifications and inbox (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 screen pattern
Notifications

How Linear, GitHub and Slack 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 inbox, every variant

    Issue tracker inbox

    Recreated from Linear

  • Code host notifications, every variant

    Code host notifications

    Recreated from GitHub

  • Team chat activity, every variant

    Team chat activity

    Recreated from Slack

  • Work tracker drawer, every variant

    Work tracker drawer

    Recreated from Jira

Not affiliated with, endorsed or sponsored by Linear, GitHub, Slack and Jira. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Notification row, every variant

See the notification row full size, free

Notification rows for each type, read and unread, with avatar or icon, context, excerpt and time. All 12 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More domain packs

See all domain

  • 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

  • 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

  • Uploads, capture and files

    Desktop14 components52 variants3 recreations

    Desktop upload and file patterns: drop zones, file rows, browsers, previews, croppers, CSV import, exports and storage meters.

    $9, or included with Pro

Questions about the notifications and inbox pack

  • One Figma file: SuperDuper Pack: Notifications and inbox (Desktop). It has 8 components with 36 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.