See it all in action

Live demo shop with every component working together

ProductPrice

Display price with discount calculations

npx shadcn@latest add https://registry.rifan.xyz/r/product-price.json

Props

PropTypeDefaultDescription
price*numberCurrent price
originalPricenumberOriginal price for discount
currencystringUSDCurrency code
sizestringmdText size
$299.99$399.99-25%
$299.99$399.99-25%
$299.99$399.99-25%
$299.99

Usage

import { ProductPrice } from '@revannasser/ecommerce-ui'

// Display price with discount calculations
<ProductPrice
  price={...}
  originalPrice={...}
  currency={...}
/>