Sections

Components

Utilities

Forms

Hooks

useIsMobile

Format

Copy Markdown

Format numbers, bytes, and time with Intl API.

Docs API

PreviewCode

File size120 kB

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/format

Usage#

import { 
  FormatByte, 
  FormatNumber, 
  FormatRelativeTime 
} from "@/registry/react/components/format";

<FormatByte value={120_000} />
<FormatNumber value={1234567} />
<FormatRelativeTime value={new Date("2025-05-05")} />

Examples#

Format Byte#

Format byte values as file sizes.

PreviewCode

File size120 kB

Unit display#

Use the unitDisplay prop to control how the unit is displayed.

PreviewCode

Long: 1.5 megabytes

Short: 1.5 MB

Narrow: 1.5MB

Unit system#

Use unitSystem to choose between decimal (1000 bytes) or binary (1024 bytes).

PreviewCode

Decimal (1000): 1.02 kB

Binary (1024): 1 kB

Format Relative Time#

Format dates as relative time.

PreviewCode

Last updated1 year ago

Style#

Use the style prop for long, short, or narrow format.

PreviewCode

Long: 1 year ago

Short: 1 yr. ago

Narrow: 1y ago

Format Number#

Format numbers with locale-aware options.

PreviewCode

Downloads1,234,567per month

Currency#

Use style="currency" with the currency prop for currency formatting.

PreviewCode

USD: $99.99

EUR: €99.99

BRL: R$99.99

Percentage#

Use style="percent" to format numbers as percentages.

PreviewCode

Default: 75%

With decimals: 75.67%

Compact notation#

Use notation="compact" for compact display.

PreviewCode

1.2M: 1.2M

120K: 120K

Downloads: 1.2M per month

API Reference#

FormatByte#

Prop	Type	Default
`value`	`number`	-
`unit`	`"byte"`	`"bit"`
`unitDisplay`	`"long"`	`"short"`
`unitSystem`	`"decimal"`	`"binary"`
`locale`	`string`	-

FormatRelativeTime#

Prop	Type	Default
`value`	`Date`	`number`
`numeric`	`"always"`	`"auto"`
`style`	`"long"`	`"short"`
`locale`	`string`	-

FormatNumber#

Prop	Type	Default
`value`	`number`	-
`locale`	`string`	-
`style`	`"decimal"`	`"percent"`
`currency`	`string`	-
`unit`	`string`	-
`notation`	`"standard"`	`"compact"`
`minimumFractionDigits`	`number`	-
`maximumFractionDigits`	`number`	-

For a complete list of props, see the Ark UI documentation.

[

Download Trigger ](/docs/utilities/download-trigger)[

Highlight ](/docs/utilities/highlight)

On This Page

Installation Usage Examples Format Byte Unit display Unit system Format Relative Time Style Format Number Currency Percentage Compact notation API Reference FormatByte FormatRelativeTime FormatNumber