Search Cell

Component

About

An animated search box illustration that types out queries one letter at a time and blurs in matching result rows, useful for landing pages or feature showcases that demonstrate search functionality.

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

Code

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

Usage.tsx

import { SearchCell } from "@/components/ui/search-cell";

export default function SearchCellDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <SearchCell
        className="w-full max-w-sm rounded-2xl border border-zinc-200 dark:border-zinc-800"
        typeSpeed={65}
        pauseDuration={3000}
        label="Searching..."
        queries={[
          {
            query: "onboarding docs for new hires",
            results: [
              {
                path: "HR / Docs",
                title: "New hire onboarding guide",
                highlight: "onboarding",
              },
              {
                path: "HR / Templates",
                title: "First week checklist",
                highlight: "docs",
              },
            ],
          },
          {
            query: "How do I request time off",
            results: [
              {
                path: "Policies / Leave",
                title: "Time off request process",
                highlight: "time off",
              },
            ],
          },
        ]}
      />
    </div>
  );
}