Search Bar

A self-contained command-palette style searchable dropdown. Type to filter a list of 20 countries in real time, navigate with ↑/↓, select with Enter, clear with Esc, and dismiss by clicking outside. The active item is highlighted with a spring-animated pill, matches are highlighted in-line, and the count chip updates live. Built with Motion — keyboard-first, accessible, and fully reduced-motion aware.

Preview Canvas
esc
move
select
20 countries

Installation

Install component dependencies or run the automated CLI command.

pnpm dlx shadcn@latest add https://sahilcodex.vercel.app/r/search-bar.json

Usage

import SearchBar from "@/components/ui/search-bar";
export default function Page() {
return (
<div className="flex min-h-screen items-center justify-center">
<SearchBar generateDuration={3} imageSrc="/fightclub1.jpeg" />
</div>
);
}
"You have a right to perform your prescribed duty, but you are not entitled to the fruits of actions."
Bhagavad Gita

Design by SahilCodex
© 2026. Built with hands.