Shadcn.io is not affiliated with official shadcn/ui
Clock Text
Live digital clock with per-digit slide animation, pulsing colon, 12h/24h formats, and IANA timezone support for React and Next.js dashboards using motion.
Clock Text preview
A live digital clock that ticks once per second with the precision of a server-room readout. Each digit slot animates independently — when the value changes, the new digit slides up while the old one slides out, so only what actually changed moves. The colons between hours, minutes, and seconds pulse with a soft opacity oscillation, sold separately from the tick so the heartbeat stays steady even between digit changes. Supports 12-hour and 24-hour formats, optional seconds, optional colon, and any IANA timezone (Europe/Berlin, America/Los_Angeles, Asia/Tokyo). Drop it into a status page, an event lobby, an admin dashboard, a kiosk, or a "we open at" marketing surface.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the clock-text text effect into my projectRelated Components
Countdown Text
Counts down to a target date with per-digit flip
Relative Time Text
Live 'X ago' relative-time display
LCD Text
Seven-segment LCD-styled numeric display
Sliding Number
Slot-machine sliding digits for changing numbers
Counting Number
Animated number tween from one value to another
Rolling Text
Slot-machine letter roll for word transitions
FAQ
Was this page helpful?
Sign in to leave feedback.