Product Search 10 block design & features
A skincare search block built with shadcn/ui. A wide rounded search field sits above two columns: a list of trending searches on the left and three large portrait bestsellers on the right.
As the shopper types, the most popular matching search appears in grey after the cursor, and Tab or the right arrow accepts it. The suggestion list filters to searches containing the query with the typed part in bold, and the product results narrow word by word against names, brands and keywords, ignoring filler words like "for". Clicking a suggestion fills the field, and a clear button resets it.
Suited to beauty, wellness and other catalogues where shoppers search by need rather than product name. Suggestions, trending terms, products and the number of results are props, and the columns stack on small screens.