Price

v0.1.1
Draft

Formatted US dollars from an integer amount of cents, rendered in a data element with a plain decimal value, in three sizes.

pnpm add @behivetech/atoms.price

This is the snapshot of v0.1.1, the current version, as recorded on 2026-11-10. The live page runs its examples →

Examples of v0.1.1 are shown as code; only the latest version runs live. Open the live examples →

The default md size, formatted from integer cents.

Basic Price
1const BasicPrice = () => <Price amountCents={125000} currency="USD" />;
2

3render(<BasicPrice />);

Every size: sm for list meta, md for checkout lines, lg for detail pages and totals.

Price Sizes
1const PriceSizes = () => (
2  <>
3    <Price amountCents={125000} currency="USD" size="sm" />{" "}
4    <Price amountCents={125000} currency="USD" size="md" />{" "}
5    <Price amountCents={125000} currency="USD" size="lg" />
6  </>
7);
8

9render(<PriceSizes />);

The amount is formatted in the given locale; the value attribute stays a plain decimal.

Price Locale
1const PriceLocale = () => (
2  <Price amountCents={125000} currency="USD" locale="de-DE" />
3);
4

5render(<PriceLocale />);