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.
Ā