Skip to content
Nim UI

PriceTag

The PriceTag component displays a formatted price with optional strikethrough original price and discount percentage. It supports multiple sizes for use in product cards, cart items, and checkout summaries.

Import

import { PriceTag } from '@nim-ui/components';

Basic Usage

Basic PriceTag

$99.99
View Code 
<PriceTag price="$99.99" />

With Original Price

Show the original price with a strikethrough to indicate a discount.

PriceTag with Discount

$79.99$99.99
View Code 
<PriceTag price="$79.99" originalPrice="$99.99" />

With Discount Percentage

Display the savings percentage alongside the prices.

PriceTag with Discount Percentage

$799$999Save 20%
View Code 
<PriceTag
  price="$799"
  originalPrice="$999"
  discountPercent="20%"
/>

Sizes

Three size options are available for different display contexts.

PriceTag Sizes

$49.99$69.99
$49.99$69.99
$49.99$69.99
View Code 
<PriceTag price="$49.99" originalPrice="$69.99" size="sm" />
<PriceTag price="$49.99" originalPrice="$69.99" size="md" />
<PriceTag price="$49.99" originalPrice="$69.99" size="lg" />

Props

Name Type Default Description
price * string | number - The current price to display
originalPrice string | number - Original price shown with strikethrough when discounted
discountPercent string - Discount percentage text, e.g. "20%"
size 'sm' | 'md' | 'lg' 'md' Size of the price text
className string - Additional CSS classes to apply

Usage Examples

Product Listing

function ProductPrice({ product }: { product: Product }) {
  const hasDiscount = product.salePrice < product.price;


  return (
    <PriceTag
      price={`$${product.salePrice.toFixed(2)}`}
      originalPrice={hasDiscount ? `$${product.price.toFixed(2)}` : undefined}
      discountPercent={
        hasDiscount
          ? `${Math.round((1 - product.salePrice / product.price) * 100)}%`
          : undefined
      }
    />
  );
}

Checkout Summary

function CheckoutTotal({ subtotal, discount, total }: CheckoutProps) {
  return (
    <div className="space-y-2">
      <div className="flex justify-between">
        <span>Subtotal</span>
        <PriceTag price={subtotal} size="sm" />
      </div>
      {discount > 0 && (
        <div className="flex justify-between text-green-600">
          <span>Discount</span>
          <PriceTag price={`-$${discount.toFixed(2)}`} size="sm" />
        </div>
      )}
      <div className="flex justify-between border-t pt-2 font-semibold">
        <span>Total</span>
        <PriceTag price={`$${total.toFixed(2)}`} size="lg" />
      </div>
    </div>
  );
}