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.
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>
);
}