Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Format for Ark UI

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

data-slot="format-byte"

PropType
valuenumber

The byte size to format.

unit?"bit" | "byte"

The unit granularity to display.

Type
"bit" | "byte"
unitDisplay?"long" | "short" | "narrow"

The unit display.

Type
"long" | "short" | "narrow"
unitSystem?"decimal" | "binary"

The unit system to use for formatting.

Type
"decimal" | "binary"
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

FormatNumber

data-slot="format-number"

PropType
valuenumber

The number to format.

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

FormatRelativeTime

data-slot="format-relative-time"

PropType
valueDate

The date to format.

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.