Shadcn.io is not affiliated with official shadcn/ui
Countdown Text
Live countdown to a target Date with per-digit flip-clock animation, configurable formats, and an onComplete callback for React and Next.js apps using motion.
Countdown Text preview
Counts down to any future Date with the precision of a flip-clock board. Each digit animates independently — when a value changes, the new digit slides up while the old one slides out, so only the digits that actually moved animate. Three render modes cover the common needs: "labeled" (12d 3h 45m 12s), "compact" (DD:HH:MM:SS), and "minimal" (drops days when zero). When the target hits, onComplete fires and the display freezes at all-zeros so it never goes negative. Built for launch pages, sales banners, event lobbies, waitlists, and product reveals where you want a real ticking deadline instead of a static "Coming soon".
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 countdown-text text effect into my projectRelated Components
Clock Text
Live digital clock with pulsing colon
Relative Time Text
Live 'X ago' relative-time display
Sliding Number
Slot-machine sliding digits for changing numbers
Counting Number
Animated number tween from one value to another
LCD Text
Seven-segment LCD-styled numeric display
Rolling Text
Slot-machine letter roll for word transitions
FAQ
Was this page helpful?
Sign in to leave feedback.