Typeahead Dropdown
Search input with a dropdown of autocompletions that bolds the matched substring.
Usage
The import and the props worth knowing about, in one place.
import { Search4 } from "@/components/beste/piece/search4";
<Search4
query="ship"
suggestions={[
"shipping address",
"shipping labels API",
"shipping zones setup"
]}
/>More Search pieces
View all Search
Nina Simone
Vocals, piano
Miles Davis
Trumpet
Herbie Hancock
Keys
Joni Mitchell
Guitar, vocals
Erykah Badu
Vocals
Showing 3 of 5 results
Typing Search
A query gets typed out letter by letter while the list filters live, highlighting the matched text and collapsing rows that no longer fit, then clears and tries another search. Rows take a photo when one is given and fall back to initials.
Product Autocomplete
Ecommerce suggestions dropdown with a warm thumbnail, rating line, and trailing price column.
Active Query
Focused search input with a typed query, blinking caret, hit counter, and clear button.
People Autocomplete
Mention-style popover listing matching people with avatars, role lines, and a presence dot.