Format Relative Time

A shadcn-style relative time formatting utility built with Ark UI primitives.

Updated45 minutes ago

Trial endsin 2 days

import { FormatRelativeTime } from "@/components/ui/format";

const FormatRelativeTimeDemo = () => (
  <div className="grid w-full max-w-sm gap-3 rounded-xl border border-border bg-card p-4">
    <div className="flex items-center justify-between gap-3 border-border border-b pb-3">
      <span className="font-medium text-sm">Updated</span>
      <span className="text-muted-foreground text-sm">
        <FormatRelativeTime value={new Date(Date.now() - 1000 * 60 * 45)} />
      </span>
    </div>
    <div className="flex items-center justify-between gap-3">
      <span className="font-medium text-sm">Trial ends</span>
      <span className="text-muted-foreground text-sm">
        <FormatRelativeTime
          value={new Date(Date.now() + 1000 * 60 * 60 * 24 * 3)}
        />
      </span>
    </div>
  </div>
);

export default FormatRelativeTimeDemo;

Installation

npx shadcn@latest add @ark-cn/format

Install the dependency required by this utility:

npm install @ark-ui/react

Copy 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 { FormatRelativeTime } from "@/components/ui/format"

Examples

Default

Updated45 minutes ago

Trial endsin 3 days

import { FormatRelativeTime } from "@/components/ui/format";

const FormatRelativeTimeDemo = () => (
  <div className="grid w-full max-w-sm gap-3 rounded-xl border border-border bg-card p-4">
    <div className="flex items-center justify-between gap-3 border-border border-b pb-3">
      <span className="font-medium text-sm">Updated</span>
      <span className="text-muted-foreground text-sm">
        <FormatRelativeTime value={new Date(Date.now() - 1000 * 60 * 45)} />
      </span>
    </div>
    <div className="flex items-center justify-between gap-3">
      <span className="font-medium text-sm">Trial ends</span>
      <span className="text-muted-foreground text-sm">
        <FormatRelativeTime
          value={new Date(Date.now() + 1000 * 60 * 60 * 24 * 3)}
        />
      </span>
    </div>
  </div>
);

export default FormatRelativeTimeDemo;

API reference

This utility mirrors Ark UI's relative time formatter. The ark-cn file exports it both as FormatRelativeTime and as Format.RelativeTime.

See the ARK UI documentation for the full API.

Format Byte

A shadcn-style byte formatting utility built with Ark UI primitives.

Format Time

A shadcn-style time formatting utility built with Ark UI primitives.