Search Bar

A sleek, modern search bar with animated placeholder text that smoothly cycles through multiple prompts with blur transitions.

Preview

Installation

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/search-bar.json

Usage

Import the component:

import { SearchBar, SearchBarMinimal } from "@/components/search-bar"

Use it in your code:

<SearchBar
  placeholders={[
    "Search for anything...",
    "Try 'React components'",
    "Ask me anything..."
  ]}
  interval={2500}
  onSubmit={(value) => console.log(value)}
/>

Props

Property	Type	Default	Description
`placeholders`	`string[]`	`["Search...", "Type something...", "What are you looking for?"]`	Array of placeholder texts to cycle through.
`interval`	`number`	`3000`	Time in milliseconds between placeholder transitions.
`onChange`	`function`	`undefined`	Callback fired when input value changes.
`onSubmit`	`function`	`undefined`	Callback fired when form is submitted or Enter is pressed.
`icon`	`ReactNode`	`Search icon`	Custom icon to display (SearchBar only).
`className`	`string`	`""`	Additional CSS classes for the container.