Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Format for React Aria

Format numbers, bytes, and time with Intl API.

Framework
UI library
File size120 kB

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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

API Reference

FormatByte

<span> data-slot="format-byte"

PropType
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"

PropType
valuenumber

The number's value.

className?string

Forwarded to the part.

FormatRelativeTime

<span> data-slot="format-relative-time"

PropType
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"