Scoped Search

Component

About

A search input with a scope picker built into the field (All, Docs, Issues, People) that filters its suggestion list by scope and recognizes a typed "in:docs" token as a shortcut for picking that scope.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scoped Search to your project and fits it to your theme.

Code

How Scoped Search is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ScopedSearch } from "@/components/ui/scoped-search";
import type { ScopedSearchSuggestion } from "@/components/ui/scoped-search";
import { useState } from "react";
import { BookOpen, CircleDot, User } from "lucide-react";

function Readout({ label, value }: { label: string; value: string }) {
  return (
    <p className="text-[11px] font-medium leading-tight text-ink-faint">
      {label}: <code className="font-mono text-ink">{value || "—"}</code>
    </p>
  );
}

const SUGGESTIONS: ScopedSearchSuggestion[] = [
  {
    id: "d1",
    scope: "docs",
    label: "Rate limits and retries",
    hint: "API reference / Limits",
    leading: <BookOpen size={15} />,
  },
  {
    id: "d2",
    scope: "docs",
    label: "Rotating API keys",
    hint: "Guides / Security",
    leading: <BookOpen size={15} />,
  },
  {
    id: "d3",
    scope: "docs",
    label: "Webhook retry schedule",
    hint: "Guides / Webhooks",
    leading: <BookOpen size={15} />,
  },
  {
    id: "i1",
    scope: "issues",
    label: "Retry storm after deploy #4812",
    hint: "Open · platform",
    leading: <CircleDot size={15} />,
  },
  {
    id: "i2",
    scope: "issues",
    label: "Rate limiter drops requests at burst #4790",
    hint: "Closed · api",
    leading: <CircleDot size={15} />,
  },
  {
    id: "i3",
    scope: "issues",
    label: "Key rotation leaves stale cache #4755",
    hint: "Open · auth",
    leading: <CircleDot size={15} />,
  },
  {
    id: "p1",
    scope: "people",
    label: "Rahel Tesfaye",
    hint: "Platform team",
    leading: <User size={15} />,
  },
  {
    id: "p2",
    scope: "people",
    label: "Ravi Menon",
    hint: "API team",
    leading: <User size={15} />,
  },
  {
    id: "p3",
    scope: "people",
    label: "Rosa Lindqvist",
    hint: "Support",
    leading: <User size={15} />,
  },
];

export default function ScopedSearchDemo() {
  const [scope, setScope] = useState("all");
  const [query, setQuery] = useState("");
  const [last, setLast] = useState("");
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-10">
      <div className="flex w-full max-w-[520px] flex-col gap-3">
        <ScopedSearch
          label="Search the workspace"
          scope={scope}
          onScopeChange={setScope}
          value={query}
          onValueChange={setQuery}
          suggestions={SUGGESTIONS}
          onSubmit={(text, where) => setLast(`search "${text}" in ${where}`)}
          onSuggestionSelect={(item) =>
            setLast(`open ${item.scope}/${item.id}`)
          }
        />
        <Readout label="scope" value={scope} />
        <Readout label="last action" value={last} />
      </div>
    </div>
  );
}