Format Byte
A shadcn-style byte formatting utility built with Ark UI primitives.
Avatar48.1 kB
Hero image1.56 MB
Backup9.22 GB
import { FormatByte } from "@/components/ui/format";
const samples = [
{ label: "Avatar", value: 48_120 },
{ label: "Hero image", value: 1_560_000 },
{ label: "Backup", value: 9_220_000_000 },
] as const;
const FormatByteDemo = () => (
<div className="grid w-full max-w-sm gap-3 rounded-xl border border-border bg-card p-4">
{samples.map((sample) => (
<div
key={sample.label}
className="flex items-center justify-between gap-3 border-border border-b pb-3 last:border-b-0 last:pb-0"
>
<span className="font-medium text-sm">{sample.label}</span>
<span className="text-muted-foreground text-sm">
<FormatByte value={sample.value} />
</span>
</div>
))}
</div>
);
export default FormatByteDemo;
Installation
npx shadcn@latest add @ark-cn/formatInstall the dependency required by this utility:
npm install @ark-ui/reactCopy the shared formatter source into your app:
TSXcomponents/ui/format.tsx
"use client";
import {
FormatByte as FormatBytePrimitive,
type FormatByteProps as FormatBytePrimitiveProps,
Format as FormatPrimitive,
FormatRelativeTime as FormatRelativeTimePrimitive,
type FormatRelativeTimeProps as FormatRelativeTimePrimitiveProps,
FormatTime as FormatTimePrimitive,
type FormatTimeProps as FormatTimePrimitiveProps,
} from "@ark-ui/react/format";
export type FormatByteProps = FormatBytePrimitiveProps;
export const FormatByte = (props: FormatByteProps) => (
<FormatBytePrimitive {...props} />
);
export type FormatTimeProps = FormatTimePrimitiveProps;
export const FormatTime = (props: FormatTimeProps) => (
<FormatTimePrimitive {...props} />
);
export type FormatRelativeTimeProps = FormatRelativeTimePrimitiveProps;
export const FormatRelativeTime = (props: FormatRelativeTimeProps) => (
<FormatRelativeTimePrimitive {...props} />
);
export const Format = {
Byte: FormatPrimitive.Byte,
RelativeTime: FormatPrimitive.RelativeTime,
Time: FormatPrimitive.Time,
} as const;
Update import aliases to match your project setup.
Usage
import { FormatByte } from "@/components/ui/format"Examples
Default
Avatar48.1 kB
Hero image1.56 MB
Backup9.22 GB
import { FormatByte } from "@/components/ui/format";
const samples = [
{ label: "Avatar", value: 48_120 },
{ label: "Hero image", value: 1_560_000 },
{ label: "Backup", value: 9_220_000_000 },
] as const;
const FormatByteDemo = () => (
<div className="grid w-full max-w-sm gap-3 rounded-xl border border-border bg-card p-4">
{samples.map((sample) => (
<div
key={sample.label}
className="flex items-center justify-between gap-3 border-border border-b pb-3 last:border-b-0 last:pb-0"
>
<span className="font-medium text-sm">{sample.label}</span>
<span className="text-muted-foreground text-sm">
<FormatByte value={sample.value} />
</span>
</div>
))}
</div>
);
export default FormatByteDemo;
API reference
This utility mirrors Ark UI's byte formatter. The ark-cn file exports it both as FormatByte and as Format.Byte.
See the ARK UI documentation for the full API.