shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { FormatByte } from "@/components/ui/format";<div className="flex flex-col gap-1">
<span className="text-muted-foreground text-sm">File size</span>
<span className="font-semibold text-2xl text-foreground tabular-nums tracking-tight">
<FormatByte value={120_000} />
</span>
</div>Demos
Byte
Byte Unit Display
Byte Unit System
Number
Number Compact
Number Currency
Number Percent
Relative Time
Relative Time Short
FAQ
Which formatters does Format give me?
FormatNumber for plain numbers, currency, percents and compact numbers, FormatByte for file sizes, and FormatRelativeTime for "3 hours ago". Each renders a span, so you can style it with a class like any text.
Which locale does Format use?
The default locale of the environment that renders it, through the Intl API. It does not take a locale prop. On a server that is the server's locale, in the browser the user's, so wrap it in your own component if you need to pin one.
How do I show a price or a percent?
FormatNumber takes the options of Intl.NumberFormat as props: style="currency" with currency="USD", style="percent", or notation="compact". The Currency, Percent and Compact demos show each.
Does FormatByte use 1000 or 1024?
1000 by default (unitSystem="decimal"). Set unitSystem="binary" to divide by 1024. The labels stay kilobyte, megabyte and so on, up to terabyte, and unitDisplay picks short, long or narrow.
Does FormatRelativeTime update as time passes?
No. It computes the distance from now each time it renders, in seconds, minutes, hours, days, months or years, and does not tick. Re-render it, for example from a timer, to refresh it. style picks long, short or narrow.
Can FormatRelativeTime cause a hydration warning?
It can. The server and the browser each read their own clock and locale, so the text may differ between the HTML and the first client render. Render it after mount, for example inside ClientOnly, when the value is close to now.
API Reference
FormatByte
<span> data-slot="format-byte"
valuenumber
The byte's value.
unitDisplay?Intl.NumberFormatOptions["unitDisplay"]
The unit display.
- Type
Intl.NumberFormatOptions["unitDisplay"]- Default
"short"
unitSystem?"binary" | "decimal"
The unit system to use for formatting.
- Type
"binary" | "decimal"- Default
"decimal"
FormatNumber
<span> data-slot="format-number"
valuenumber
The number's value.
className?string
Forwarded to the part.
FormatRelativeTime
<span> data-slot="format-relative-time"
valueDate | number
The relative time's value.
- Type
Date | number
style?Intl.RelativeTimeFormatStyle
How the unit is written: long (3 months ago), short (3 mo. ago) * or narrow.
- Default
"long"