Patterns

Money

$1,250.00$1.25M$99.50—

money.tsx

"use client";

import { Money } from "@waveinno/ui";

export default function MoneyExample() {
  return (
    <div className="flex flex-wrap items-baseline gap-6 text-lg text-text">
      <Money value={1250} />
      <Money value={1250000} compact />
      <Money value={99.5} />
      <Money value={null} />
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Money } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<Money>

src/components/patterns/money.tsx

Prop	Type	Default	Description
`value`required	`number \| null \| undefined`	—
`compact`	`boolean`	—
`className`	`string`	—
`decimals`	`number`	—	Override the currency's decimals — whole-number prices read cleaner.
`symbol`	`string`	—	Escape hatch for a figure explicitly stated in another currency.

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui