shadcn.io is not affiliated with official shadcn/ui
Clock Text is a live digital clock. When a digit changes, the new one rises into its window as the old one leaves through the top, so only what changed moves: the seconds every second, the minutes once a minute. The separators pulse gently in time with the tick.
Use it for a status page, an event lobby, a kiosk, or a team page with the time where each office is. For a countdown to a date, use Countdown Text; for a running video timecode, Timecode Text; for "5 minutes ago", Relative Time Text. A small timer wakes on every second boundary and the digits move with CSS keyframe animations the install adds to your stylesheet, with no animation library; with reduced motion the digits change in place.
Installation
Usage
import { ClockText } from "@/components/ui/clock-text";<ClockText />Demos
Time zones
timeZone tells the time in any IANA zone, such as Europe/London, with its daylight saving; unset, it's the visitor's own. seconds={false} shows hours and minutes only.
12-hour
hour12 counts the hours from 1 to 12 with AM and PM, rather than from 00 to 23. The time is written in locale, en-US by default; blink={false} holds the separators still.
Accessibility
It renders a <time> element whose dateTime is the current moment. Screen readers read the time once, as written (14:05:09), from a visually hidden copy; the moving digits are hidden from them. It doesn't announce the time as it changes, which every second would be noise; to mark it as a running clock, put it in an element with role="timer", which assistive technology doesn't read out unless asked. With reduced motion the digits change in place and the separators hold still.
FAQ
Why is it blank for a moment when the page loads?
The server can't know the visitor's time, so it renders an invisible placeholder as wide as the clock, and the browser fills in the time as soon as the page runs. The page never jumps, and the server and the browser render the same markup.
Does it drift?
No. Every tick waits for the next whole second on the visitor's clock, so the seconds change when the second does, and a tab that was in the background catches up on its next tick.
Which digits move?
Only those that changed: each digit has its own window, and a new value rises in while the old one leaves. A new hour moves the hour's digits, and the others stay still.
Do the digits jump in width?
No. The clock uses tabular figures, so every digit is as wide as a zero. A 12-hour clock gains a digit at ten o'clock, as any clock written that way does.
API Reference
ClockText
<time> data-slot="clock-text"
blink?boolean
Whether the separators pulse once a second, in time with the tick. @default true.
- Default
true
hour12?boolean
A 12-hour clock with AM and PM, rather than 24 hours. @default false.
- Default
false
locale?string
The locale the time is written in (its digits and separators). Fixed by default, so every visitor sees the same format.
- Default
"en-US"
seconds?boolean
Whether it shows the seconds. @default true.
- Default
true
timeZone?string
The IANA time zone it tells the time in, such as "Europe/London"; the
visitor's own when unset.
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
--clock-text-durationstring
A digit's rise into its window (400ms).
Related
- Pro
Countdown Text
NumbersCount down to a date instead
- Pro
Timecode Text
NumbersA running video timecode
- Pro
Relative Time Text
NumbersSay it as 5 minutes ago
- Pro
LCD Text
DecorativeDigits drawn in seven segments
Sliding Number
NumbersDigits that roll to any value
- Pro
Status Pulse Text
DecorativeA live status for the same page