Adam Shelley

Web Developer

Back

Building a Custom Search Bar Component

2025-05-06

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" },
  ]}  
/>

4 suggestions available.

Ā  Ā  Ā  Ā 

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
/>

5 suggestions available.

Ā