Skip to content
Browse themes
Product block

Grouped Search Results

Results grouped by section with visible breadcrumb paths and <mark>-highlighted matches — users recognise where a result lives faster than they read its snippet.

194 lineslucide-reactAdded 13 Aug 2026Updated 11 Sept 2026
  • search
  • results
  • docs
  • filter
  • highlight

What's included

  • components/search-results-panel.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add search-results-panel

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/search-results-panel.tsx
/**
 * <SearchResultsPanel> — the page-level search surface, grouped by section.
 *
 * A flat ranked list makes users read snippets to figure out what each
 * result even is. Grouping by section with a visible breadcrumb path
 * flips that: people recognise *where* a result lives ("Docs › Auth")
 * far faster than they parse a sentence of context, so the eye jumps to
 * the right group and reads two rows instead of ten. The match itself is
 * a real <mark> — semantic highlighting, styled with tokens so it
 * survives dark mode instead of becoming browser-default yellow on navy.
 *
 * The footer row is deliberate: the worst search outcome is a dead end,
 * so "no luck" always routes somewhere a human answers.
 */

import * as React from 'react'
import { ChevronRight, LifeBuoy, Search } from 'lucide-react'

export interface SearchResult {
  title: string
  /** Breadcrumb segments, e.g. ['Docs', 'Authentication']. */
  path: string[]
  /** Snippet split around the matched term: [before, match, after]. */
  snippet: [string, string, string]
  href?: string
}

export interface SearchResultGroup {
  section: string
  results: SearchResult[]
}

export interface SearchResultsPanelProps {
  query?: string
  groups?: SearchResultGroup[]
  supportHref?: string
  className?: string
}

const DEFAULT_GROUPS: SearchResultGroup[] = [
  {
    section: 'Docs',
    results: [
      {
        title: 'Rotating API keys without downtime',
        path: ['Docs', 'Authentication'],
        snippet: ['Create the replacement ', 'API key', ' first, then revoke the old one after the grace window.'],
        href: '#',
      },
      {
        title: 'Environment variables and secrets',
        path: ['Docs', 'Configuration'],
        snippet: ['Never commit an ', 'API key', ' to source control; load it from the environment at boot.'],
        href: '#',
      },
    ],
  },
  {
    section: 'API reference',
    results: [
      {
        title: 'POST /v1/keys',
        path: ['API', 'Keys'],
        snippet: ['Issues a new ', 'API key', ' scoped to the requesting workspace. Returns the secret once.'],
        href: '#',
      },
      {
        title: 'Error 401: invalid_key',
        path: ['API', 'Errors'],
        snippet: ['Returned when the ', 'API key', ' is missing, expired, or was revoked on 12 Jul 2026.'],
        href: '#',
      },
    ],
  },
  {
    section: 'Guides',
    results: [
      {
        title: 'Shipping your first integration',
        path: ['Guides', 'Getting started'],
        snippet: ['Grab a test-mode ', 'API key', ' from the dashboard — it takes about two minutes.'],
        href: '#',
      },
    ],
  },
]

const FILTERS: Array<{ label: string; count: number; active?: boolean }> = [
  { label: 'All', count: 5, active: true },
  { label: 'Docs', count: 2 },
  { label: 'API', count: 2 },
  { label: 'Guides', count: 1 },
]

export function SearchResultsPanel({
  query = 'API key',
  groups = DEFAULT_GROUPS,
  supportHref = '#',
  className = '',
}: SearchResultsPanelProps) {
  const total = groups.reduce((sum, group) => sum + group.results.length, 0)

  return (
    <section className={`mx-auto w-full max-w-2xl ${className}`}>
      <div className="relative">
        <Search
          aria-hidden
          className="pointer-events-none absolute start-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
        />
        <input
          type="search"
          defaultValue={query}
          aria-label="Search documentation"
          className="w-full rounded-xl border border-border/60 bg-background py-3 ps-11 pe-24 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
        />
        <span className="pointer-events-none absolute end-4 top-1/2 -translate-y-1/2 text-xs tabular-nums text-muted-foreground">
          {total} results
        </span>
      </div>

      <ul className="mt-3 flex flex-wrap gap-2">
        {FILTERS.map((filter) => (
          <li key={filter.label}>
            <a
              href="#"
              aria-current={filter.active ? 'true' : undefined}
              className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold transition-colors ${
                filter.active
                  ? 'border-primary/40 bg-primary/10 text-primary'
                  : 'border-border/60 text-muted-foreground hover:bg-muted hover:text-foreground'
              }`}
            >
              {filter.label}
              <span className="tabular-nums opacity-70">{filter.count}</span>
            </a>
          </li>
        ))}
      </ul>

      <div className="mt-6 space-y-6">
        {groups.map((group) => (
          <div key={group.section}>
            {group.section ? (
              <h3
                data-stress-ignore
                className="text-xs font-semibold uppercase tracking-wide text-muted-foreground"
              >
                {group.section}
              </h3>
            ) : null}
            <ul className="mt-2 divide-y divide-border/60 overflow-hidden rounded-xl border border-border/60 bg-card/60">
              {group.results.map((result) => (
                <li key={result.title}>
                  <a
                    href={result.href ?? '#'}
                    className="block px-4 py-3 transition-colors hover:bg-muted/40"
                  >
                    <p className="text-sm font-semibold text-card-foreground">{result.title}</p>
                    <p className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
                      {result.path.map((segment, i) => (
                        <React.Fragment key={segment}>
                          {i > 0 ? (
                            <ChevronRight aria-hidden className="h-3 w-3 shrink-0 rtl:rotate-180" />
                          ) : null}
                          <span>{segment}</span>
                        </React.Fragment>
                      ))}
                    </p>
                    <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                      {result.snippet[0]}
                      <mark className="rounded-sm bg-primary/15 px-0.5 font-medium text-foreground">
                        {result.snippet[1]}
                      </mark>
                      {result.snippet[2]}
                    </p>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <a
        href={supportHref}
        className="mt-6 flex items-center gap-3 rounded-xl border border-dashed border-border/60 px-4 py-3 text-sm text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
      >
        <LifeBuoy aria-hidden className="h-4 w-4 shrink-0" />
        No luck? Ask support — a human replies within a working day.
      </a>
    </section>
  )
}

Before you paste

  • Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
  • Install: npm i lucide-react
  • Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/search-results-panel.tsx and import it where you need the section:

import { SearchResultsPanel } from '@/components/search-results-panel'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

PropTypeDefault
querystring'API key'
groupsSearchResultGroup[]DEFAULT_GROUPS
supportHrefstring'#'
classNamestring''

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

search-results-panel.html
<!--
  Grouped Search Results — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="mx-auto w-full max-w-2xl ">
  <div class="relative">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search pointer-events-none absolute start-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true">
      <path d="m21 21-4.34-4.34"></path>
      <circle cx="11" cy="11" r="8"></circle>
    </svg>
    <input type="search" aria-label="Search documentation" class="w-full rounded-xl border border-border/60 bg-background py-3 ps-11 pe-24 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring" value="API key" />
    <span class="pointer-events-none absolute end-4 top-1/2 -translate-y-1/2 text-xs tabular-nums text-muted-foreground">5 results</span>
  </div>
  <ul class="mt-3 flex flex-wrap gap-2">
    <li>
      <a href="#" aria-current="true" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold transition-colors border-primary/40 bg-primary/10 text-primary">All<span class="tabular-nums opacity-70">5</span></a>
    </li>
    <li>
      <a href="#" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold transition-colors border-border/60 text-muted-foreground hover:bg-muted hover:text-foreground">Docs<span class="tabular-nums opacity-70">2</span></a>
    </li>
    <li>
      <a href="#" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold transition-colors border-border/60 text-muted-foreground hover:bg-muted hover:text-foreground">API<span class="tabular-nums opacity-70">2</span></a>
    </li>
    <li>
      <a href="#" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold transition-colors border-border/60 text-muted-foreground hover:bg-muted hover:text-foreground">Guides<span class="tabular-nums opacity-70">1</span></a>
    </li>
  </ul>
  <div class="mt-6 space-y-6">
    <div>
      <h3 data-stress-ignore="true" class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Docs</h3>
      <ul class="mt-2 divide-y divide-border/60 overflow-hidden rounded-xl border border-border/60 bg-card/60">
        <li>
          <a href="#" class="block px-4 py-3 transition-colors hover:bg-muted/40">
            <p class="text-sm font-semibold text-card-foreground">Rotating API keys without downtime</p>
            <p class="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
              <span>Docs</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3 w-3 shrink-0 rtl:rotate-180" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
              </svg>
              <span>Authentication</span>
            </p>
            <p class="mt-1 text-sm leading-relaxed text-muted-foreground">Create the replacement <mark class="rounded-sm bg-primary/15 px-0.5 font-medium text-foreground">API key</mark> first, then revoke the old one after the grace window.</p>
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-3 transition-colors hover:bg-muted/40">
            <p class="text-sm font-semibold text-card-foreground">Environment variables and secrets</p>
            <p class="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
              <span>Docs</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3 w-3 shrink-0 rtl:rotate-180" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
              </svg>
              <span>Configuration</span>
            </p>
            <p class="mt-1 text-sm leading-relaxed text-muted-foreground">Never commit an <mark class="rounded-sm bg-primary/15 px-0.5 font-medium text-foreground">API key</mark> to source control; load it from the environment at boot.</p>
          </a>
        </li>
      </ul>
    </div>
    <div>
      <h3 data-stress-ignore="true" class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">API reference</h3>
      <ul class="mt-2 divide-y divide-border/60 overflow-hidden rounded-xl border border-border/60 bg-card/60">
        <li>
          <a href="#" class="block px-4 py-3 transition-colors hover:bg-muted/40">
            <p class="text-sm font-semibold text-card-foreground">POST /v1/keys</p>
            <p class="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
              <span>API</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3 w-3 shrink-0 rtl:rotate-180" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
              </svg>
              <span>Keys</span>
            </p>
            <p class="mt-1 text-sm leading-relaxed text-muted-foreground">Issues a new <mark class="rounded-sm bg-primary/15 px-0.5 font-medium text-foreground">API key</mark> scoped to the requesting workspace. Returns the secret once.</p>
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-3 transition-colors hover:bg-muted/40">
            <p class="text-sm font-semibold text-card-foreground">Error 401: invalid_key</p>
            <p class="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
              <span>API</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3 w-3 shrink-0 rtl:rotate-180" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
              </svg>
              <span>Errors</span>
            </p>
            <p class="mt-1 text-sm leading-relaxed text-muted-foreground">Returned when the <mark class="rounded-sm bg-primary/15 px-0.5 font-medium text-foreground">API key</mark> is missing, expired, or was revoked on 12 Jul 2026.</p>
          </a>
        </li>
      </ul>
    </div>
    <div>
      <h3 data-stress-ignore="true" class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Guides</h3>
      <ul class="mt-2 divide-y divide-border/60 overflow-hidden rounded-xl border border-border/60 bg-card/60">
        <li>
          <a href="#" class="block px-4 py-3 transition-colors hover:bg-muted/40">
            <p class="text-sm font-semibold text-card-foreground">Shipping your first integration</p>
            <p class="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
              <span>Guides</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3 w-3 shrink-0 rtl:rotate-180" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
              </svg>
              <span>Getting started</span>
            </p>
            <p class="mt-1 text-sm leading-relaxed text-muted-foreground">Grab a test-mode <mark class="rounded-sm bg-primary/15 px-0.5 font-medium text-foreground">API key</mark> from the dashboard — it takes about two minutes.</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <a href="#" class="mt-6 flex items-center gap-3 rounded-xl border border-dashed border-border/60 px-4 py-3 text-sm text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-life-buoy h-4 w-4 shrink-0" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m4.93 4.93 4.24 4.24"></path><path d="m14.83 9.17 4.24-4.24"></path><path d="m14.83 14.83 4.24 4.24"></path><path d="m9.17 14.83-4.24 4.24"></path><circle cx="12" cy="12" r="4"></circle></svg>No luck? Ask support — a human replies within a working day.</a>
</section>
  • This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
  • It is one frame: the component in its initial state, with no props applied beyond the defaults.
  • Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
9 more blocks in Command & Search
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Command & Search
Shipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once
More Command & Search blocks
View category
Open the full page for this block
Command Palette
The ⌘K switcher done properly: focus stays in the input while aria-activedescendant moves, arrows wrap, and the highlight resets on every query change.
Command & Search280 lines1 dep
Open the full page for this block
Keyboard Shortcuts Sheet
The "?" overlay, with chords written once in one notation and rendered per platform — mod becomes Command on Apple and Ctrl everywhere else, decided after mount so the markup never mismatches.
Command & Search252 lines1 dep
Open the full page for this block
Applied Filters Bar
The strip above a result set that answers "why am I only seeing four things" — every active constraint as a removable chip, with the excluded count beside it.
Command & Search238 lines1 dep
Open the full page for this block
Header Search with Suggestions
The field in the header, not the palette over it: Enter searches for what you typed unless you arrowed to a suggestion, late responses are dropped by sequence number, and recent searches are removable one at a time.
Command & Search357 lines1 dep
Open the full page for this block
Faceted Refinement Panel
Faceted search with result counts on every option, zero-count options kept visible and disabled so the list stays stable, and a note explaining why the counts do not sum.
Command & Search276 lines1 dep
Open the full page for this block
Search Scope Switcher
One query counted across every scope it could have matched, as a real tablist with arrow-key movement — so an answer that is nowhere is visible without opening four tabs.
Command & Search247 lines1 dep
Open the full page for this block
Recent Search List
The empty state of a search box, filled with the searches that are worth repeating and the ones worth saving.
Command & Search150 linesNo deps
Open the full page for this block
Faceted Search Results
The whole faceted search assembled - rail, chips, live count and sort - with the intersection actually applied and relevance offered only when there is a query.
Command & Search388 lines1 dep
Open the full page for this block
Range Facet with Histogram
The facet that is a number: a distribution over a dual-thumb slider built from two real range inputs, with typed bounds clamped on blur rather than per keystroke.
Command & Search272 lines1 dep