snowcone docs

Art Selector

Browse and select artwork to apply to products. Supports artwork of any size or aspect ratio.
This is an optional React convenience layer over the mockup URL primitive — the same render works as a plain <img> src in any language. See Get started.

Interactive Demo

Try the interactive playground below - select different artworks and see them applied to product images in real-time. Switch to the “DIY” variant to see how to build your own custom art selector using the useShop() hook:

Loading playground...

ArtSelector Props

artworksstring[]
Array of artwork image URLs (must be absolute URLs). The component automatically loads dimensions from each image.
classNamestring
CSS classes to apply to the container.

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.

Product-Level

ArtSelector can also work at the product level for individual artwork per product.

code

Make Your Own

ArtSelector is easy to build from scratch using the useShop() hook. Check out the DIY variant in the interactive playground above to see a fully working example.

Key concepts:

  • Use useShop() to access artworks, selectedArtwork, and setSelectedArtwork
  • Call setSelectedArtwork(artwork) to update the shop context - all Product components automatically receive the selected artwork
  • You can pass artworks directly to the Shop component via the artworks prop
  • The Shop component automatically loads each image and extracts width, height, and aspect ratio

How artwork URLs become full objects:

  1. You pass an array of URL strings to Shop or ArtSelector
  2. The component loads each image and automatically extracts width, height, and aspect ratio
  3. It creates full artwork objects and adds them to the shop context
  4. When you call useShop(), you get these enriched objects with id, src, width, height, and aspectRatio