Price

Pricing 16

About

Composable price component that formats amounts and currencies with support for sale pricing, compare-at values, savings, and ranges.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Price to your project and fits it to your theme.

Code

How Price is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Price,
  PriceCompareAt,
  PriceCurrent,
  PriceSavings,
} from "@/components/ui/price";
import { badgeVariants } from "@/components/ui/badge";

export default function PriceDemo() {
  return (
    <div className="p-8 space-y-6 bg-background text-foreground">
      <div className="space-y-2">
        <h3 className="font-semibold">Price with sale</h3>
        <Price
          className="tabular-nums tracking-tighter space-x-2"
          amount={1999}
          compareAt={2499}
          currency="USD"
        >
          <PriceCurrent />
          <PriceCompareAt className="text-sm line-through text-muted-foreground" />
          <PriceSavings
            className={`${badgeVariants({ variant: "outline" })} text-emerald-500 bg-emerald-100 border-none`}
          >
            Save
          </PriceSavings>
        </Price>
      </div>

      <div className="space-y-2">
        <h3 className=" ">Price with diffrent currency</h3>
        <div className="flex gap-2">
          <Price
            className="tabular-nums tracking-tighter space-x-2"
            amount={2000}
            currency="GBP"
          >
            <PriceCurrent />
          </Price>
          <Price
            className="tabular-nums tracking-tighter space-x-2"
            amount={1999}
            currency="EUR"
          >
            <PriceCurrent />
          </Price>
          <Price
            className="tabular-nums tracking-tighter space-x-2"
            amount={20000}
            currency="JPY"
          >
            <PriceCurrent />
          </Price>
        </div>
      </div>
    </div>
  );
}