Search & Discovery
card-ui search-ui tag-ui avatar-ui row-ui col-ui
The surfaces that surround a search input — what shows up below it. Result lists (flat and grouped), recent-searches menu, and saved-views list. Compose around search-ui; the input itself lives in its component demo.
When to use
Whenever a product surfaces a search input, three secondary
surfaces follow: results below the input, recents shown when the
input is focused but empty, and saved views (when users curate
queries). Most products use all three; smaller products skip
saved views.
Result list
Flat ranked list. Each row carries a title, snippet, meta (author / date / type), and an optional trailing action. list-ui + list-item-ui with tag-ui for the type.
42 results for "OKLCH tokens"
Sorted by relevance · 0.18s
"…all colors must reference --a-chrome-*, --a-data-0..9, or semantic tokens. Zero raw oklch in component CSS…"
Spec
"…OKLCH-with-transparent red-shift bug fixed in Safari 18.0 (ADR-0007); we use oklab for color-mix instead…"
Journal
"--a-primary-bg: oklch(64% 0.18 245); --a-primary-fg: oklch(98% 0.01 245)…"
Code
"…OKLCH ramps that satisfy contrast, hue-stability, and perceptual-evenness…"
Skill
Grouped results
Sectioned by type when the catalog is heterogeneous (Documents / People / Projects). Each group shows top 3–5; "See all in {group}" links to a filtered view.
"kim"
Across people, documents, and projects
People · 3
Kim Granlund
kim@example.com · Owner
Kim Park
kim.park@example.com · Member
Documents · 12
Kim's onboarding plan
Edited 2 hours ago · by Avery
Kimchi recipe — team lunch
Edited 4 days ago · by Jordan
Projects · 1
Kim's H2 roadmap
Updated yesterday · 5 active items
Recent searches menu
Popover that appears when the search input is focused but empty. Recent queries with most-recent-first ordering, a "Clear" action in the footer. Each row reruns the query on click; trailing icon dismisses a single entry.
Saved views
List of curated queries the user has named and pinned. Each row shows the view name, a short description (or active filter chips), last-run time, and edit/share/delete actions. Used for "My open issues", "Q2 customer escalations", etc.
Saved views
5 views · last edited 2 days ago
My open issues
assignee=me
status=open
12 results · 3 min ago
Q2 customer escalations
label=customer
priority=p1
created≥2026-04-01
7 results · today
Stale PRs
type=pr
updated<30d
status=open
23 results · 1 hour ago
Recent docs from team
type=doc
author∈team
edited≤7d
31 results · 4 hours ago
Composition rules
- Result count + timing in the header — "42 results · 0.18s" reads as "the search worked"; bare lists feel uncertain.
- Snippets quote the source, not paraphrase — surrounding the matched term in the actual text builds trust faster than a synthesized summary.
- Group when the catalog is heterogeneous — flat is fine if all results share a type; group when "people / docs / projects" all share a query.
- Recents are queries, not results — clicking a recent re-runs the search, it doesn't open the previous result. The semantic distinction matters.
- Filter chips inside saved-view rows replace prose — "type=pr · updated<30d" is faster to scan than "Pull requests updated in the last 30 days".
- Saved views are user-named — the system never auto-generates a name. "Untitled view" is the placeholder; users rename or discard.