Skip to content
Try free

Search (Desktop)

Desktop packActions and input

Desktop search: header trigger, global popover, autocomplete, match highlights, recents, scoped search, results and no results.

components
10
variants
34
recreations
4
themes
5

Also for mobile: Search

What’s inside

Ten search patterns for web apps: a header search trigger, a global search popover, autocomplete, highlighted matches, recent searches, scoped search, expandable search, a results page with filters, advanced search and no-results states with did-you-mean. Matches use weight, a tint and an underline, and keyboard hints sit in the popover footer.

  • 10 search patterns with typing and loading states
  • Shared result rows, group headers and key hint footer
  • Match highlights that do not rely on colour alone
  • 4 recreations of real product search UIs
  • Header search trigger, every variant

    Header search trigger

    6 variants

    • Compact
    • Wide
    • Default
    • Hover
    • Focus
  • Global search popover, every variant

    Global search popover

    Free sample

    3 variants

    • Empty query
    • Typing
    • Loading
  • Autocomplete, every variant

    Autocomplete

    3 variants

  • Highlighted matches, every variant

    Highlighted matches

    3 variants

    • Weight
    • Mark
    • Snippet
  • Recent searches, every variant

    Recent searches

    4 variants

  • Scoped search, every variant

    Scoped search

    3 variants

    • Everywhere
    • Scope token
    • Scope tabs
  • Expandable search, every variant

    Expandable search

    3 variants

  • Results page, every variant

    Results page

    3 variants

    • List
    • With filters
    • Loading
  • Advanced search, every variant

    Advanced search

    3 variants

    • Popover footer
    • Results header
    • Form
  • No results, every variant

    No results

    3 variants

    • Popover
    • Page
    • Did you mean
Figma file
SuperDuper Pack: Search (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
Search bar, Search (empty / suggestions) and Search results

How GitHub, Shopify admin 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.

  • Code host search, every variant

    Code host search

    Recreated from GitHub

  • Commerce admin search, every variant

    Commerce admin search

    Recreated from Shopify admin

  • Docs workspace search, every variant

    Docs workspace search

    Recreated from Notion

  • Docs site search, every variant

    Docs site search

    Recreated from Algolia DocSearch

Not affiliated with, endorsed or sponsored by GitHub, Shopify admin, Notion and Algolia DocSearch. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Global search popover, every variant

See the global search popover full size, free

The global search popover empty, typing and loading, with result rows, group headers and key hints. All 3 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More actions and input packs

See all actions and input

  • Date, time and calendars

    Desktop17 components73 variants4 recreations

    Desktop date and time fields, calendar and range pickers, time zones, month, week and day views, events and slot pickers.

    $9, or included with Pro

  • Selection controls

    Desktop13 components54 variants3 recreations

    Desktop checkbox and radio groups, setting switches, sliders, steppers, ratings, swatches, a colour picker and a transfer list.

    $9, or included with Pro

  • Chips, tags and badges

    Desktop10 components64 variants3 recreations

    Desktop tags, labels, lozenges, count badges and status indicators, sized for dense tables and sidebars.

    $9, or included with Pro

Questions about the search pack

  • One Figma file: SuperDuper Pack: Search (Desktop). It has 10 components with 34 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.