Expanding Search Dock

Buttons 762

About

Minimal search icon that expands into full input with blur

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

Code

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

Usage.tsx

import { ExpandingSearchDock } from "@/components/ui/expanding-search-dock-shadcnui"

export default function Demo() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-8">
      <ExpandingSearchDock />
    </div>
  )
}