Pieces/Search

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

design tokens42

Active Query

search2

Focused search input with a typed query, blinking caret, hit counter, and clear button.

launchesc
Launch plan Q2Docs
launch-prepChannel
Laura NgLaunch lead
↑↓ to navigate

Command Palette

search3

⌘K modal with a query bar, three typed results, and a keyboard-hint footer at the bottom.

ship
shipping address
shipping labels API
shipping zones setup

Typeahead Dropdown

search4

Search input with a dropdown of autocompletions that bolds the matched substring.

status: openpriority: highlabel: bugSearch issues…

Filter Chips

search5

Multi-filter search bar with removable token chips inline with the placeholder.

Search workspace…
Recent
invoice template
onboarding checklist
Q1 roadmap
kickoff notes

Recent Searches

search6

Popover that opens on focus and lists prior queries with a clock icon and remove control.

No results for invioceTry fewer keywords or check spelling.

No Results

search7

Empty-state card echoing the failed query with a did-you-mean link and a retry tip.

Find last month's sales reportListening…

Voice Search

search8

Pill-shaped voice input with a pulsing mic, live transcript, and a waveform visualizer.

Summarize last week's support tickets

AI Prompt Bar

search9

Gradient-bordered prompt input with a sparkle icon and a tinted Ask AI action button.

mira
Files
mira-handoff.figFigma
brand-mira.pdfDoc

Grouped Results

search10

Command menu with two sectioned buckets of results, each prefixed by a category label.

design tokens
Searching across 42 workspaces…

Loading Results

search11

Search popover mid-query with a spinner in the input and three shimmering skeleton rows.

Search over 12,000 templates…
Try “marketing landing”, “saas pricing”, or “portfolio”.

Hero Search

search12

Pill-shaped hero search bar with an embedded solid CTA button and a helper caption below.

onboarding

Tabbed Results

search13

Search header with category tabs that show per-tab counts and an underline for the active one.

Search docs and guides…
Trending

Trending Queries

search14

Search field followed by a row of trending query chips led by a small flame label.

Search issues, docs, and threads…

Scoped Search

search15

Combined control with a left scope dropdown and a wider query input sharing a single pill.

linen-chair.jpg
linen-chair.jpgFind similar products

Visual Search

search16

Image-attached search bar with an attached file chip, camera capture, and a search icon button.

and
Andrea Kim
Andrea KimDesign
Andre Costa
Andre CostaGrowth
Anders Lee
Anders LeeEngineering

People Autocomplete

search17

Mention-style popover listing matching people with avatars, role lines, and a presence dot.

linen
Washed linen pillow4.8
$48
Linen throw blanket4.6
$112
Natural linen apron4.9
$34

Product Autocomplete

search18

Ecommerce suggestions dropdown with a warm thumbnail, rating line, and trailing price column.

beste.codocsauthentication
Setting up SSO with SAML and OktaConfigure an IdP to issue SAML assertions to Beste, then map groups to workspace roles.

Result Snippet

search19

SERP-style card with a breadcrumb trail, linked title, and body snippet with highlighted terms.

is:open assignee:me label:
Suggested operators
label:bugBug reports
label:polishPolish
label:docsDocumentation

Operator Hints

search20

Power-query input paired with a suggestions panel that surfaces operator tokens and their meanings.

Search issues…
Saved searches
My open issuesassignee:me is:open
This week's bugslabel:bug created:>7d
Stale PRsis:pr draft:false updated:<14d

Saved Searches

search21

Search popover listing named saved queries with pin or star markers and a raw query beneath.

Search Shortcut

search22

Ghost pill button with a leading search icon, placeholder text, and a trailing keyboard shortcut badge. Useful as a header command-palette trigger.