React components
Overview
A mockup is a URL. You can render and sell merchandise in any language with nothing installed — see Get started and Render a mockup. These React components are an optional convenience layer over that primitive — handy if you’re building a React storefront, unnecessary everywhere else.
img.snowcone.app and buy.snowcone.app URLs.Setup
Install @snowcone-app/ui, then wrap your app in the <Shop> provider so the components know which Shop ID to render and sell against. The components are styled by your Tailwind v4 build: add @import '@snowcone-app/ui/styles/globals.css' to your global CSS, an @source for your own code, and (in Next.js) transpilePackages: ['@snowcone-app/ui']. There’s no install CLI — see Shop setup for the full snippet.
All components
The building blocks for a React storefront. Each wraps the same URL primitive you can use directly.
ProductImageRender a mockup — an artwork-aware <img> wrapping the URL primitive.
ProductOptionsSize, color, and variant selection bound to the catalog.
ProductPricePrice that resolves from your Shop ID and the selected variant.
AddToCartDrop the current product + artwork into the hosted checkout.
ProductCardImage, options, price, and cart composed into one card.
ProductListGrid of product cards from a catalog query.
ArtworkCustomizerLet shoppers position and crop their artwork on the product.
ArtSelectorInteractive picker for choosing artwork to apply to products.
useProductDataHook that reads product info from the public catalog.
SearchCatalog search backed by the public Meilisearch index.
ResponsiveZoomPinch and hover zoom for inspecting a rendered mockup.
RealtimeMockupLive-updating mockup preview as inputs change.
ChatDrawerAssistant drawer for AI-driven artwork and product flows.