Product Options

Interactive product variant picker that automatically handles color swatches, size buttons, and dropdown selections with real-time price updates from product context.

Interactive Demo

ProductOptions is an optional React convenience over the mockup URL. Variants are just opt.<attr> query params — this component picks them for you.

Try the interactive playground below - select different product options and see the price update in real-time:

Loading playground...

ProductOptions Props

classNamestring

CSS classes for styling the options container

Context Data (Automatic)

optionAttributesRecord<string, OptionAttribute>

Product option attributes from Product context defining available choices and UI types

combinationsCombination[]

Valid variant combinations with pricing and availability from Product context

selectionRecord<string, string>

Current selected options from Product context, updated automatically

updateSelection(key: string, value: string) => void

Function from Product context to update selections automatically

UI Types

color-swatchesUI Type

Circular color picker buttons with hex colors or images

buttonsUI Type

Rectangular buttons for sizes, styles, and other text options

dropdownUI Type

Select dropdown for long lists of options or materials

color-pickerUI Type

HTML color input for custom color selection

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.

Customized Example

Here’s the same component after copying it to your project and customizing it. Notice the dotted borders and checkmark indicators - this shows how easy it is to modify the component exactly how you want it!

Source Code

code

Multiple Products Demo

The ProductList component fetches multiple products and automatically wraps each in its own Product provider. Notice how selecting options in one product doesn’t affect the others!

Loading products...

Code Implementation

code

🔑 Key Point: The ProductList component automatically wraps each product in its own Product provider. Components inside the renderItem function use the nearest parent’s context via useProduct().