Legacy Clock

Why Use It

Best for app icons, dashboards, and status rows where a static clock icon would feel flat.
Defaults to live local time, so the component updates itself without extra state wiring.
Supports fixed snapshots for previews, screenshots, and seeded mock data.
Includes both day and night variants, which makes it easy to reuse across different chrome treatments.

Installation

Install the component directly, then drop it anywhere you need a live or fixed clock face.

$ bunx --bun shadcn@latest add https://sabraman.ru/r/legacy-clock.json

Quick Start

Start with the live day and night variants to cover the most common icon and status use cases.

"use client";

import { LegacyClock } from "@/components/legacy-clock";

export function LegacyClockUsageExample() {
	return (
		<div className="flex flex-wrap items-center gap-4">
			<LegacyClock aria-label="Live day clock" variant="day" />
			<LegacyClock aria-label="Live night clock" variant="night" />
		</div>
	);
}

Examples

Live Day and Night

Use the default live mode for day and night clocks that stay in sync with local time.

"use client";

import { LegacyClock } from "@/components/legacy-clock";

export function LegacyClockUsageExample() {
	return (
		<div className="flex flex-wrap items-center gap-4">
			<LegacyClock aria-label="Live day clock" variant="day" />
			<LegacyClock aria-label="Live night clock" variant="night" />
		</div>
	);
}

Fixed Snapshot

Pass a fixed `date` when you need repeatable screenshots or stable seeded demos.

Day snapshot

Night snapshot

"use client";

import { LegacyClock } from "@/components/legacy-clock";

const FIXED_TIME = new Date("2026-03-15T09:41:00");

export function LegacyClockFixedSnapshotExample() {
	return (
		<div className="flex flex-wrap items-center gap-5">
			<div className="flex flex-col items-center gap-3">
				<LegacyClock
					aria-label="Fixed day clock snapshot"
					date={FIXED_TIME}
					live={false}
					showSeconds={false}
					variant="day"
				/>
				<span className="font-medium text-[#8b9bb4] text-xs uppercase tracking-[0.18em]">
					Day snapshot
				</span>
			</div>
			<div className="flex flex-col items-center gap-3">
				<LegacyClock
					aria-label="Fixed night clock snapshot"
					date={FIXED_TIME}
					live={false}
					showSeconds={false}
					variant="night"
				/>
				<span className="font-medium text-[#8b9bb4] text-xs uppercase tracking-[0.18em]">
					Night snapshot
				</span>
			</div>
		</div>
	);
}

Size Variations

Scale the same component up or down for icons, cards, and larger ornamental treatments.

48px

76px

104px

"use client";

import { LegacyClock } from "@/components/legacy-clock";

const SIZE_EXAMPLES = [48, 76, 104] as const;

export function LegacyClockSizeExample() {
	return (
		<div className="flex flex-wrap items-end gap-6">
			{SIZE_EXAMPLES.map((size) => (
				<div className="flex flex-col items-center gap-3" key={size}>
					<LegacyClock aria-label={`Legacy clock ${size}px`} size={size} />
					<span className="font-medium text-[#8b9bb4] text-xs uppercase tracking-[0.18em]">
						{size}px
					</span>
				</div>
			))}
		</div>
	);
}

Status Row

The same clock can sit inside a small status or launcher row without extra wrappers.

Clock

Works as a live icon inside app lists, status cards, or launcher rows.

"use client";

import { LegacyClock } from "@/components/legacy-clock";

export function LegacyClockStatusRowExample() {
	return (
		<div className="w-full max-w-[340px] rounded-[20px] border border-white/10 bg-[linear-gradient(180deg,#f7f8fa_0%,#e3e8ef_100%)] p-4 shadow-[0_10px_24px_rgba(0,0,0,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]">
			<div className="flex items-center gap-4 rounded-[14px] border border-[#ccd3df] bg-white/80 px-4 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.92)]">
				<LegacyClock aria-label="Status clock" size={52} />
				<div className="min-w-0">
					<p className="font-bold text-[#56637a] text-[13px] uppercase tracking-[0.18em]">
						Clock
					</p>
					<p className="mt-1 text-[#6e7a92] text-sm leading-relaxed">
						Works as a live icon inside app lists, status cards, or launcher
						rows.
					</p>
				</div>
			</div>
		</div>
	);
}

API Reference

LegacyClockProps mostly controls time source and presentation. The main decisions are whether the clock should stay live, whether to show seconds, and how large the frame should render.

Also inherits: React.HTMLAttributes<HTMLDivElement>

Prop	Type	Required
`date`	`Date`	No
`live`	`boolean`	No
`showSeconds`	`boolean`	No
`size`	`number`	No
`variant`	`LegacyClockVariant`	No
`withShadow`	`boolean`	No

Notes

live defaults to true, but passing date or setting live={false} gives you a stable snapshot.
showSeconds={false} is useful when you want a quieter icon or a fixed mock without a ticking hand.
size scales the entire asset treatment, so you do not need custom SVG math for different contexts.

SABRAMAN