🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Product Price

The ProductPrice component displays product's listing and spot price. It wraps two Price components.


Import the component from @faststore/ui

import { ProductPrice } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/atoms/Price/styles.scss'
import '@faststore/ui/src/components/molecules/ProductPrice/styles.scss'


Original price:$999Price:$950.04
<ProductPrice value={950.04} listPrice={999} formatter={useFormattedPrice} />
// Example of formatter
interface PriceFormatterOptions {
  decimals?: boolean
export const usePriceFormatter = ({ decimals }: PriceFormatterOptions = {}) => {
  return useCallback(
    (price: number) =>
      Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: decimals ? 2 : 0,
export const useFormattedPrice = (price: number) => {
  const formatter = usePriceFormatter()
  return useMemo(() => formatter(price), [formatter, price])


value*numberSpecifies product's raw price value.
listPrice*numberSpecifies product's listing price.
formatterPriceFormatterFormatter function that transforms the raw price value and render the result.
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-product-price

Design Tokens

Local tokenDefault value/Global token linked

Use Cases

The ProductPrice component wraps two instances of the Price component, representing the prices with the spot and listing variants.

  • In cases where both prices are identical, only the spot price will be presented.
  • If the listing price is set to 0, only the spot price will be shown.


For further customization, you can use the following data attributes:


Related components

  • 62.5


    Prices are used to display the price of a given product, discount and total values.

    See more