Search Cell
An animated search input illustration that cycles through queries with typewriter effect and blur-in results.
Loading...
Installation
npx shadcn@latest add @scrollxui/search-cell Usage
import { SearchCell } from '@/components/ui/search-cell';<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" },
],
},
]}
/>API Reference
Search Cell
An animated search input illustration that cycles through queries with a typewriter effect and blur-in result rows.