Product 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.

247 lineslucide-reactAdded 31 Aug 2026

search
scopes
tabs
results
keyboard

What's included

components/search-scope-switcher.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add search-scope-switcher

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

Results for “renewal”

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

Source

components/search-scope-switcher.tsx

'use client'

/**
 * <SearchScopeSwitcher> — the same query, counted across every place it
 * could have matched.
 *
 * A search box that returns one flat list has already made a decision on
 * the user's behalf: that everything is one corpus. Products with more than
 * one kind of thing in them — documents, people, settings, past
 * conversations — need the user to say which, and the cheapest way to ask
 * is to show the answer in every scope at once.
 *
 * WHY THE COUNTS ARE THE FEATURE
 *
 * A scope tab with no count is a guess. "People" might have the answer or
 * might be empty, and the only way to find out is to click and lose your
 * place. With counts the user picks correctly the first time, and — the
 * part that matters more — they can see immediately when the answer is
 * nowhere, without visiting four tabs to establish it.
 *
 * AN EMPTY SCOPE STAYS VISIBLE
 *
 * Same reasoning as the facet panel: a tab strip that reorders or drops
 * tabs as the query changes is disorienting. Zero-result scopes stay in
 * place, greyed, and cannot be selected — the strip is stable and the
 * absence is information.
 *
 * KEYBOARD BEHAVIOUR IS THE TABLIST CONTRACT. Left/Right move between
 * tabs, Home and End jump to the ends, and focus follows selection —
 * which is correct here because switching scope is cheap and reversible.
 *
 * ACCESSIBILITY: a real tablist with roving `tabIndex`, `aria-selected` and
 * `aria-controls` pointing at the panel. The count is inside the tab's
 * accessible name, so the reason to choose a tab is announced with it.
 */

import * as React from 'react'
import { FileText, Hash, MessageSquare, Search, Settings, Users } from 'lucide-react'

export interface SearchScope {
  id: string
  label: string
  count: number
  Icon: typeof FileText
}

export interface ScopedResult {
  id: string
  scopeId: string
  title: string
  context: string
  meta: string
}

export interface SearchScopeSwitcherProps {
  query?: string
  scopes?: SearchScope[]
  results?: ScopedResult[]
  className?: string
}

const DEFAULT_SCOPES: SearchScope[] = [
  { id: 'all', label: 'All', count: 47, Icon: Search },
  { id: 'docs', label: 'Documents', count: 31, Icon: FileText },
  { id: 'people', label: 'People', count: 4, Icon: Users },
  { id: 'threads', label: 'Threads', count: 12, Icon: MessageSquare },
  { id: 'channels', label: 'Channels', count: 0, Icon: Hash },
  { id: 'settings', label: 'Settings', count: 0, Icon: Settings },
]

const DEFAULT_RESULTS: ScopedResult[] = [
  {
    id: '1',
    scopeId: 'docs',
    title: 'Q3 renewal playbook',
    context: 'the renewal window opens 60 days before the term ends, and the owner…',
    meta: 'Updated 3 days ago · Sam Okafor',
  },
  {
    id: '2',
    scopeId: 'docs',
    title: 'Pricing and renewal FAQ',
    context: '…what happens at renewal if the seat count changed mid-term?',
    meta: 'Updated 2 weeks ago · Rhea Patel',
  },
  {
    id: '3',
    scopeId: 'people',
    title: 'Jordan Lee',
    context: 'Renewals lead · jordan@acme.com',
    meta: 'Customer Success',
  },
  {
    id: '4',
    scopeId: 'threads',
    title: '#renewals — Acme Corp',
    context: 'Rhea: pushing the renewal call to Thursday, they want the usage report first',
    meta: '14 replies · yesterday',
  },
]

export function SearchScopeSwitcher({
  query = 'renewal',
  scopes = DEFAULT_SCOPES,
  results = DEFAULT_RESULTS,
  className = '',
}: SearchScopeSwitcherProps) {
  /*
    Per-instance prefix for every id this block emits.

    The literals these replaced were a latent duplicate the moment the
    block appeared twice on one document, and `aria-labelledby` on a
    duplicated id resolves to the first match -- so the second copy was
    labelled by the first copy's heading. Client component, so `useId` is
    the right tool.
  */
  const uid = React.useId()

  const [activeId, setActiveId] = React.useState('all')
  const tabRefs = React.useRef<Record<string, HTMLButtonElement | null>>({})

  const selectable = scopes.filter((scope) => scope.count > 0)
  const shown = activeId === 'all' ? results : results.filter((r) => r.scopeId === activeId)

  function onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
    const index = selectable.findIndex((scope) => scope.id === activeId)
    let next = index

    if (event.key === 'ArrowRight') next = (index + 1) % selectable.length
    else if (event.key === 'ArrowLeft') next = (index - 1 + selectable.length) % selectable.length
    else if (event.key === 'Home') next = 0
    else if (event.key === 'End') next = selectable.length - 1
    else return

    event.preventDefault()
    const id = selectable[next].id
    setActiveId(id)
    tabRefs.current[id]?.focus()
  }

  return (
    <section
      className={`rounded-2xl border border-border bg-card text-card-foreground ${className}`}
    >
      <div className="border-b border-border p-4 sm:p-5">
        <p className="text-sm text-muted-foreground">
          Results for <span className="font-semibold text-foreground">“{query}”</span>
        </p>

        <div
          role="tablist"
          aria-label="Search scope"
          className="mt-3 flex flex-wrap gap-1.5"
        >
          {scopes.map((scope) => {
            const empty = scope.count === 0
            const selected = scope.id === activeId

            return (
              <button
                key={scope.id}
                ref={(node) => {
                  tabRefs.current[scope.id] = node
                }}
                type="button"
                role="tab"
                id={`${uid}-scope-tab-${scope.id}`}
                aria-selected={selected}
                aria-controls={`${uid}-scope-panel`}
                aria-disabled={empty || undefined}
                // Roving tabIndex: one stop for the whole strip, then arrows.
                tabIndex={selected ? 0 : -1}
                onKeyDown={onKeyDown}
                onClick={() => {
                  if (!empty) setActiveId(scope.id)
                }}
                className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
                  empty
                    ? 'cursor-not-allowed border-transparent text-muted-foreground/40'
                    : selected
                      ? 'border-primary bg-primary/10 text-foreground'
                      : 'border-transparent text-muted-foreground hover:bg-muted hover:text-foreground'
                }`}
              >
                <scope.Icon aria-hidden className="h-3.5 w-3.5" />
                <span aria-hidden>{scope.label}</span>
                <span
                  aria-hidden
                  className={`rounded px-1 text-[11px] tabular-nums ${
                    selected ? 'bg-primary/15 text-primary' : 'text-muted-foreground'
                  }`}
                >
                  {scope.count}
                </span>
                {/* The count belongs in the name, not only in a badge. */}
                <span className="sr-only">
                  {scope.label}, {scope.count} {scope.count === 1 ? 'result' : 'results'}
                  {empty ? ', unavailable' : ''}
                </span>
              </button>
            )
          })}
        </div>
      </div>

      <div
        id={`${uid}-scope-panel`}
        role="tabpanel"
        aria-labelledby={`${uid}-scope-tab-${activeId}`}
        tabIndex={0}
        className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <ul className="divide-y divide-border">
          {shown.map((result) => {
            const scope = scopes.find((s) => s.id === result.scopeId)
            return (
              <li key={result.id}>
                <a
                  href="#"
                  className="block p-4 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5"
                >
                  <div className="flex items-center gap-2">
                    {scope ? (
                      <scope.Icon aria-hidden className="h-3.5 w-3.5 text-muted-foreground" />
                    ) : null}
                    <h3 className="text-sm font-semibold">{result.title}</h3>
                    {/* Shown only in the merged view, where it disambiguates. */}
                    {activeId === 'all' && scope ? (
                      <span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
                        {scope.label}
                      </span>
                    ) : null}
                  </div>
                  <p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
                    …{result.context}
                  </p>
                  <p className="mt-1.5 text-xs text-muted-foreground">{result.meta}</p>
                </a>
              </li>
            )
          })}
        </ul>
      </div>
    </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-scope-switcher.tsx and import it where you need the section:

import { SearchScopeSwitcher } from '@/components/search-scope-switcher'

Customize

1 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.

Prop	Type	Default
`query`	`string`	`'renewal'`
`scopes`	`SearchScope[]`	`DEFAULT_SCOPES`
`results`	`ScopedResult[]`	`DEFAULT_RESULTS`
`className`	`string`	`''`

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.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

search-scope-switcher.html

<!--
  Search Scope Switcher — 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 is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<section class="rounded-2xl border border-border bg-card text-card-foreground ">
  <div class="border-b border-border p-4 sm:p-5">
    <p class="text-sm text-muted-foreground">Results for <span class="font-semibold text-foreground">“renewal”</span></p>
    <div role="tablist" aria-label="Search scope" class="mt-3 flex flex-wrap gap-1.5">
      <button type="button" role="tab" id="_R_0_-scope-tab-all" aria-selected="true" aria-controls="_R_0_-scope-panel" tabindex="0" class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-primary bg-primary/10 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-search h-3.5 w-3.5" aria-hidden="true">
          <path d="m21 21-4.34-4.34"></path>
          <circle cx="11" cy="11" r="8"></circle>
        </svg>
        <span aria-hidden="true">All</span>
        <span aria-hidden="true" class="rounded px-1 text-[11px] tabular-nums bg-primary/15 text-primary">47</span>
        <span class="sr-only">All, 47 results</span>
      </button>
      <button type="button" role="tab" id="_R_0_-scope-tab-docs" aria-selected="false" aria-controls="_R_0_-scope-panel" tabindex="-1" class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-transparent text-muted-foreground hover:bg-muted 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-file-text h-3.5 w-3.5" aria-hidden="true">
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="M10 9H8"></path>
          <path d="M16 13H8"></path>
          <path d="M16 17H8"></path>
        </svg>
        <span aria-hidden="true">Documents</span>
        <span aria-hidden="true" class="rounded px-1 text-[11px] tabular-nums text-muted-foreground">31</span>
        <span class="sr-only">Documents, 31 results</span>
      </button>
      <button type="button" role="tab" id="_R_0_-scope-tab-people" aria-selected="false" aria-controls="_R_0_-scope-panel" tabindex="-1" class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-transparent text-muted-foreground hover:bg-muted 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-users h-3.5 w-3.5" aria-hidden="true">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <circle cx="9" cy="7" r="4"></circle>
        </svg>
        <span aria-hidden="true">People</span>
        <span aria-hidden="true" class="rounded px-1 text-[11px] tabular-nums text-muted-foreground">4</span>
        <span class="sr-only">People, 4 results</span>
      </button>
      <button type="button" role="tab" id="_R_0_-scope-tab-threads" aria-selected="false" aria-controls="_R_0_-scope-panel" tabindex="-1" class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-transparent text-muted-foreground hover:bg-muted 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-message-square h-3.5 w-3.5" aria-hidden="true">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
        <span aria-hidden="true">Threads</span>
        <span aria-hidden="true" class="rounded px-1 text-[11px] tabular-nums text-muted-foreground">12</span>
        <span class="sr-only">Threads, 12 results</span>
      </button>
      <button type="button" role="tab" id="_R_0_-scope-tab-channels" aria-selected="false" aria-controls="_R_0_-scope-panel" aria-disabled="true" tabindex="-1" class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-not-allowed border-transparent text-muted-foreground/40">
        <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-hash h-3.5 w-3.5" aria-hidden="true">
          <line x1="4" x2="20" y1="9" y2="9"></line>
          <line x1="4" x2="20" y1="15" y2="15"></line>
          <line x1="10" x2="8" y1="3" y2="21"></line>
          <line x1="16" x2="14" y1="3" y2="21"></line>
        </svg>
        <span aria-hidden="true">Channels</span>
        <span aria-hidden="true" class="rounded px-1 text-[11px] tabular-nums text-muted-foreground">0</span>
        <span class="sr-only">Channels, 0 results, unavailable</span>
      </button>
      <button type="button" role="tab" id="_R_0_-scope-tab-settings" aria-selected="false" aria-controls="_R_0_-scope-panel" aria-disabled="true" tabindex="-1" class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-not-allowed border-transparent text-muted-foreground/40">
        <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-settings h-3.5 w-3.5" aria-hidden="true">
          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
        <span aria-hidden="true">Settings</span>
        <span aria-hidden="true" class="rounded px-1 text-[11px] tabular-nums text-muted-foreground">0</span>
        <span class="sr-only">Settings, 0 results, unavailable</span>
      </button>
    </div>
  </div>
  <div id="_R_0_-scope-panel" role="tabpanel" aria-labelledby="_R_0_-scope-tab-all" tabindex="0" class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
    <ul class="divide-y divide-border">
      <li>
        <a href="#" class="block p-4 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5">
          <div class="flex items-center gap-2">
            <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-file-text h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
              <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
              <path d="M10 9H8"></path>
              <path d="M16 13H8"></path>
              <path d="M16 17H8"></path>
            </svg>
            <h3 class="text-sm font-semibold">Q3 renewal playbook</h3>
            <span class="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">Documents</span>
          </div>
          <p class="mt-1 line-clamp-1 text-sm text-muted-foreground">…the renewal window opens 60 days before the term ends, and the owner…</p>
          <p class="mt-1.5 text-xs text-muted-foreground">Updated 3 days ago · Sam Okafor</p>
        </a>
      </li>
      <li>
        <a href="#" class="block p-4 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5">
          <div class="flex items-center gap-2">
            <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-file-text h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
              <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
              <path d="M10 9H8"></path>
              <path d="M16 13H8"></path>
              <path d="M16 17H8"></path>
            </svg>
            <h3 class="text-sm font-semibold">Pricing and renewal FAQ</h3>
            <span class="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">Documents</span>
          </div>
          <p class="mt-1 line-clamp-1 text-sm text-muted-foreground">……what happens at renewal if the seat count changed mid-term?</p>
          <p class="mt-1.5 text-xs text-muted-foreground">Updated 2 weeks ago · Rhea Patel</p>
        </a>
      </li>
      <li>
        <a href="#" class="block p-4 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5">
          <div class="flex items-center gap-2">
            <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-users h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
              <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
              <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
              <circle cx="9" cy="7" r="4"></circle>
            </svg>
            <h3 class="text-sm font-semibold">Jordan Lee</h3>
            <span class="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">People</span>
          </div>
          <p class="mt-1 line-clamp-1 text-sm text-muted-foreground">…Renewals lead · jordan@acme.com</p>
          <p class="mt-1.5 text-xs text-muted-foreground">Customer Success</p>
        </a>
      </li>
      <li>
        <a href="#" class="block p-4 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5">
          <div class="flex items-center gap-2">
            <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-message-square h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            <h3 class="text-sm font-semibold">#renewals — Acme Corp</h3>
            <span class="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">Threads</span>
          </div>
          <p class="mt-1 line-clamp-1 text-sm text-muted-foreground">…Rhea: pushing the renewal call to Thursday, they want the usage report first</p>
          <p class="mt-1.5 text-xs text-muted-foreground">14 replies · yesterday</p>
        </a>
      </li>
    </ul>
  </div>
</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.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
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

App Shell8 blocks

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

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 dep10 Sept

5 results

Docs

API reference

Guides

Shipping your first integration
GuidesGetting started
Grab a test-mode API key from the dashboard — it takes about two minutes.

No luck? Ask support — a human replies within a working day.

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.

Command & Search194 lines1 dep11 Sept

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 dep11 Sept

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 dep13 Sept

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 dep11 Sept

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 dep13 Sept

Pick up where you left off

An empty search box is the most common state of a search box, and it is usually blank. Recent queries are the cheapest useful thing to put there, and the result count is what makes them worth re-running.

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 deps10 Sept

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

Price

114 products between £200 and £600

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