# Search results

> A docs search panel — query input, result count, and a linked result list with breadcrumbs and type badges.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/search-results).

- Page, with a live preview: https://shadcn.exchange/r/quill/search-results
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/search-results-light-1666d20fd3efe5ff.png
- Registry item: https://www.quilldesignsystem.com/r/search-results.json
- Categories: navigation, data-display
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/search-results.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `input`, `badge`, `separator`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

A docs search panel — query input, result count, and a linked result list with breadcrumbs and type badges. Do: State the result count in visible text (2 results for “token”) so users know the query actually ran. Don't: Leave users guessing whether zero results means the search hasn't run yet or genuinely found nothing. Use command-palette when search is a global, keyboard-triggered overlay (⌘K) rather than an inline panel on the page. Use data-table when results are structured records with multiple sortable columns, not a simple linked list.

## Files

### `registry/blocks/search-results.tsx`

```tsx
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Icon } from '@/components/ui/icon'
import { Separator } from '@/components/ui/separator'

const results = [
  { title: 'Design tokens', crumb: 'Docs › Foundations', type: 'Guide' },
  { title: 'Button component', crumb: 'Components › Button', type: 'Component' },
  { title: 'Theming & dark mode', crumb: 'Docs › Theming', type: 'Guide' },
  { title: 'Accessibility checklist', crumb: 'Docs › A11y', type: 'Guide' },
]

/** A docs search panel — query input, result count, and a linked result list with breadcrumbs and type badges. */
export function SearchResults() {
  return (
    <div className="flex w-[440px] flex-col gap-3 text-foreground">
      <Input placeholder="Search the docs…" defaultValue="token" aria-label="Search" />
      <p className="text-xs text-muted-foreground">{results.length} results for “token”</p>
      <ul className="overflow-hidden rounded-lg border border-border">
        {results.map((r, i) => (
          <li key={r.title}>
            {i > 0 && <Separator />}
            <a
              href="#"
              className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent outline-hidden focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50"
            >
              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                <Icon name="description" size={18} />
              </div>
              <div className="flex flex-1 flex-col">
                <span className="text-sm font-medium">{r.title}</span>
                <span className="text-xs text-muted-foreground">{r.crumb}</span>
              </div>
              <Badge variant="outline">{r.type}</Badge>
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}
```