Product Search
Production-ready search components using InstantSearch and Meilisearch. Includes SearchBox, Filters, and ProductGrid.
These search components are an optional React convenience layer. The catalog itself is a public Meilisearch index you can query in any language — see Product info.
Interactive Demo
Try the interactive playground below with different layout variants. The search includes real-time filtering - click “Filters” to open the filter panel or type in the search box to find products:
Loading playground...
Installation
npm install @snowcone-app/ui
Styling — your Tailwind v4 build compiles it. In your global stylesheet, add
@import '@snowcone-app/ui/styles/globals.css' (brings in Tailwind, the theme tokens, and an @source for the package) plus an @source for your own code. In Next.js, also add transpilePackages: ['@snowcone-app/ui']. Add className="dark" on an ancestor for dark mode.