Product Search 6 - Mobile filter sheetPro
A mobile-first search results view where a Filters button opens a bottom sheet with size chips, color swatches and an in-stock switch, applied to a two-column product grid. Use it for storefront search on phones where a sidebar would not fit.
About Product Search 6
A mobile-first search results view where a Filters button opens a bottom sheet with size chips, color swatches and an in-stock switch, applied to a two-column product grid. Use it for storefront search on phones where a sidebar would not fit.
Product Search 6 is a pro product search block for React, built on shadcn/ui and Tailwind CSS. It ships as 145 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- ecommerce
- search
- mobile
- sheet
- filters
- responsive
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/product-search-06Dependencies installed automatically: lucide-react.
Uses: button, input, label, reveal, separator, sheet, switch, utils.
Usage
import ProductSearch06 from "@/components/blocks/product-search-06"
export default function Page() {
return <ProductSearch06 />
}