Fmt

One component for every formatted value — dates, numbers, currency, bytes, durations, relative times — so the locale is a single decision rather than three developers reaching for toLocaleString, toFixed and padStart on one screen.

src/components/ui/fmt.tsx

About

From the component's own source, where it was written.

One component for every formatted value: dates, numbers, currency, bytes, durations, relative times.

Formatting is where dashboards drift. Three developers reach for toLocaleString, toFixed and a hand-rolled padStart on the same screen, and the result is 1,234.5 beside 1234.50 beside 1 234,5. Routing all of it through one component makes the locale a single decision.

Numbers, currency and percentages go through Intl, which already knows every locale's grouping and symbol placement. Dates support an Intl style *and* a token pattern, because "DD.MM.YYYY" is a real requirement that Intl deliberately cannot express — it formats by locale convention, not by an exact layout someone specified.

Note the token casing, which follows the moment/dayjs convention rather than strftime: **MM is the month and mm is the minute**. HH:MM:SS would print the month where you wanted minutes, so it is worth reading twice.

Install

npx astralyx-ui add fmt

Usage

import { Fmt } from '@/components/ui/fmt'

<Fmt type="date" value={date} format="DD.MM.YYYY HH:mm" />
<Fmt type="currency" value={1234.5} currency="EUR" />
<Fmt type="number" value={1234567.891} decimals={2} />
<Fmt type="bytes" value={748100} />

Composer

Change the props and the source below follows.

02.09.2026 14:07:05

Props

type

format

locale

tsx

<Fmt
  type="date"
  value={value}
  format="DD.MM.YYYY HH:mm:ss"
  locale="en-GB"
/>

Examples

Every type

tsx

<Fmt type="date" value={d} format="DD.MM.YYYY HH:mm:ss" />
<Fmt type="date" value={d} format="MMMM D, YYYY" />
<Fmt type="number" value={1234567.891} decimals={2} />
<Fmt type="currency" value={1234.5} currency="EUR" />
<Fmt type="percent" value={0.982} decimals={1} />
<Fmt type="bytes" value={748100} />
<Fmt type="duration" value={3792} />
<Fmt type="relative" value={twoHoursAgo} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Fmt`

One component for every formatted value: dates, numbers, currency, bytes, durations, relative times.

Extends Omit<ComponentProps<'span'>, 'children'>.

Prop	Type	Default	Description
type	FmtType	required	What the value is.
value	number \| string \| Date	required	—
format	string	'symbol'	Maps to Intl currencyDisplay.
currency	string	'symbol'	ISO 4217 code, fraction digits, thousands separators.
decimals	number	—	ISO 4217 code, fraction digits, thousands separators.
locale	string	'en-GB'	—
grouping	boolean	true	ISO 4217 code, fraction digits, thousands separators.
now	Date	—	Reference point for relative times. Pass it to keep a render deterministic.
tabular	boolean	—	Line up in a column. On by default for every numeric type.
animate	boolean	false	Count to the value instead of printing it. Off by default — a column of forty figures counting at once is noise. Turn it on where the number is the content: a headline, a total, a figure that moves while you watch. Ignored for dates and relative times.

`FMT`

Extends Omit<ComponentProps<'span'>, 'children'>.

Prop	Type	Default	Description
type	FmtType	required	What the value is.
value	number \| string \| Date	required	—
format	string	'symbol'	Maps to Intl currencyDisplay.
currency	string	'symbol'	ISO 4217 code, fraction digits, thousands separators.
decimals	number	—	ISO 4217 code, fraction digits, thousands separators.
locale	string	'en-GB'	—
grouping	boolean	true	ISO 4217 code, fraction digits, thousands separators.
now	Date	—	Reference point for relative times. Pass it to keep a render deterministic.
tabular	boolean	—	Line up in a column. On by default for every numeric type.
animate	boolean	false	Count to the value instead of printing it. Off by default — a column of forty figures counting at once is noise. Turn it on where the number is the content: a headline, a total, a figure that moves while you watch. Ignored for dates and relative times.

Functions

Function	Signature	Description
formatDate	(value: Date, pattern: string, locale: string) => string	—
formatBytes	(bytes: number, decimals: number \| undefined, locale: string) => string	Binary-prefixed size. `1000` is a kilobyte to marketing, `1024` to a disk.
formatDuration	(totalSeconds: number) => string	Seconds as `1h 04m 12s`, dropping leading units that are zero.
formatRelative	(value: Date, locale: string, now: Date) => string	Largest unit that keeps the number under its own threshold.

Types

Type	Definition	Description
`FmtType`	\| 'date' \| 'number' \| 'currency' \| 'percent' \| 'bytes' \| 'duration' \| 'relative'	—

Behaviour

Topic	Detail	Description
output element	<time> or <span>	Dates and relative times render a <time> with an ISO dateTime, so the machine-readable value travels with the display one. Everything else is a span with tabular figures.
helpers	formatDate, formatBytes, formatDuration, formatRelative	Exported for use outside JSX.