Format Time
A shadcn-style time formatting utility built with Ark UI primitives.
12-hour clock5:35 PM
12-hour with seconds5:35:00 PM
24-hour clock17:35
import { FormatTime } from "@/components/ui/format";
const launchDate = new Date("2026-04-16T17:35:00.000Z");
const FormatTimeDemo = () => (
<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">12-hour clock</span>
<span className="text-muted-foreground text-sm">
<FormatTime value={launchDate} format="12h" />
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium text-sm">12-hour with seconds</span>
<span className="text-muted-foreground text-sm">
<FormatTime value={launchDate} format="12h" withSeconds />
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="font-medium text-sm">24-hour clock</span>
<span className="text-muted-foreground text-sm">
<FormatTime value={launchDate} format="24h" />
</span>
</div>
</div>
);
export default FormatTimeDemo;
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 { FormatTime } from "@/components/ui/format"Examples
Default
12-hour clock5:35 PM
12-hour with seconds5:35:00 PM
24-hour clock17:35
import { FormatTime } from "@/components/ui/format";
const launchDate = new Date("2026-04-16T17:35:00.000Z");
const FormatTimeDemo = () => (
<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">12-hour clock</span>
<span className="text-muted-foreground text-sm">
<FormatTime value={launchDate} format="12h" />
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium text-sm">12-hour with seconds</span>
<span className="text-muted-foreground text-sm">
<FormatTime value={launchDate} format="12h" withSeconds />
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="font-medium text-sm">24-hour clock</span>
<span className="text-muted-foreground text-sm">
<FormatTime value={launchDate} format="24h" />
</span>
</div>
</div>
);
export default FormatTimeDemo;
API reference
This utility mirrors Ark UI's time formatter. The ark-cn file exports it both as FormatTime and as Format.Time.
See the ARK UI documentation for the full API.