Inspired by the likes sonner and shadcn, I wanted to create a searchbar component that is minimalist and satisfying to use.

There are many options for customising, but here are a couple of demos below to get the general idea. It's built with React, Tailwind, and Motion for the animations.

Currently this is not a component that is installed. It will be a simple copy and paste into your project.

Demos

Basic Usage

// Basic Usage
import { SearchBar } from "@/components/ui/searchbar";

 <SearchBar
    dropdownOptions={[
    { id: 4, label: "Apple" },
    { id: 5, label: "Banana" },
    { id: 6, label: "Orange" },
    { id: 7, label: "Pineapple" },
  ]}  
/>

Highlight Matches

// Highlight matches
import { SearchBar } from "@/components/ui/searchbar";

 <SearchBar
    dropdownOptions={[
    { id: 1, label: "🍎 Apple" },
    { id: 2, label: "🍌 Banana" },
    { id: 3, label: "🍊 Orange" },
    { id: 4, label: "🍍 Pineapple" },
    { id: 5, label: "🍓 Strawberry" },
    { id: 6, label: "🥭 Mango" },
    { id: 7, label: "🫐 Blueberry" },
    { id: 8, label: "🍇 Grapes" },
    { id: 9, label: "🍉 Watermelon" },
    { id: 10, label: "🥝 Kiwi" },
  ]}
    minimizable
    highlightMatches
/>