Product Price

Display product pricing that automatically updates based on variant selection from Product context.

Interactive Demo

ProductPrice is an optional React convenience over the mockup URL. Price comes from the public catalog — this component just formats it.

Try the product price component in different configurations using the variant switcher:

Loading playground...

Component Props

contextPricenumber

Price in cents. Use this for standalone usage outside Product context. If not provided, automatically reads from Product context.

showCentsboolean

Whether to show cents in the price display. Defaults to true.

showCurrencyboolean

Whether to show the currency symbol. Defaults to false.

currencystring

Currency code (e.g., “USD”, “EUR”). Defaults to “USD”.

localestring

Locale for price formatting (e.g., “en-US”, “de-DE”). Defaults to “en-US”.

classNamestring

CSS classes to apply to the price element.

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.