Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Format for React Radix UI

Format numbers, bytes, and time with Intl API.

Framework
UI library
File size120 kB

Installation

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

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