shadcn.io is not affiliated with official shadcn/ui

Shadcn Format for React and Tailwind

Format numbers, bytes, and time with Intl API.

File size120 kB

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

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/format.tsx

"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} />;

Update the import paths to match your project setup.

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

PropType

AttributeType

FormatNumber

PropType

AttributeType

FormatRelativeTime

PropType

AttributeType

Download Trigger

Highlight