Expandable Search Bar

Buttons 100

About

This expandable search bar is a sleek, animated UI element designed for modern web applications. It collapses into a compact icon for space efficiency and smoothly expands to reveal a fully functional search input with placeholder animation, auto-focus, and submission handling. Perfect for navigation headers, dashboards, or any interface needing intuitive search functionality. Built with React and Framer Motion for fluid animations, it's customizable for left/right expansion and integrates seamlessly with Tailwind CSS for styling. Enhance user engagement with keyboard support (Enter to search, Escape to close) and responsive behavior.

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

Code

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

Usage.tsx

import ExpandableSearchBar from "@/components/ui/expandable-search-bar";

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center gap-16">
      {/* Expand right */}
      <div className="w-full max-w-xs sm:max-w-md flex flex-col items-center">
        <ExpandableSearchBar
          expandDirection="right"
          width={250}
          placeholder="Search right..."
          onSearch={q => console.log("search right", q)}
          className="w-full"
        />
      </div>

      {/* Expand left */}
      <div className="w-full max-w-xs sm:max-w-md flex flex-col items-center">
        <div className="w-full flex justify-end">
          <ExpandableSearchBar
            expandDirection="left"
            width={250}
            placeholder="Search left..."
            onSearch={q => console.log("search left", q)}
            className="w-full"
          />
        </div>
      </div>
    </main>
  );
}