Shadcn Format for React and Tailwind

Installation

bunx --bun shadcn@latest add https://kit.dev/r/format.json

pnpm dlx shadcn@latest add https://kit.dev/r/format.json

npx shadcn@latest add https://kit.dev/r/format.json

yarn shadcn@latest add https://kit.dev/r/format.json

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

"use client";

import { Format as ArkFormat } from "@ark-ui/react/format";

export const FormatByte = (
  props: React.ComponentProps<typeof ArkFormat.Byte>
) => <ArkFormat.Byte data-slot="format-byte" {...props} />;

export const FormatNumber = (
  props: React.ComponentProps<typeof ArkFormat.Number>
) => <ArkFormat.Number data-slot="format-number" {...props} />;

export const FormatRelativeTime = (
  props: React.ComponentProps<typeof ArkFormat.RelativeTime>
) => <ArkFormat.RelativeTime data-slot="format-relative-time" {...props} />;

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.

Unit display

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

Unit system

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

Format Relative Time

Format dates as relative time.

Style

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

Format Number

Format numbers with locale-aware options.

Currency

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

Percentage

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

Compact notation

Use notation="compact" for compact display.

API Reference

FormatByte

FormatRelativeTime

FormatNumber

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