Shadcn.io is not affiliated with official shadcn/ui
Relative Time Text
Live "5s ago" / "2m ago" / "3h ago" relative-time display that recomputes on an interval and cross-fades each unit change for React and Next.js apps using motion.
Relative Time Text preview
A relative-time label that stays alive on its own. Drop in a timestamp and it renders "just now", "5s ago", "12m ago", "3h ago", "2d ago" — recomputing every few seconds so the value is always honest. Each transition between units cross-fades through Motion's AnimatePresence so the change reads as a soft swap rather than a jarring jump. Supports short ("5s") and long ("5 seconds ago") forms, a configurable update cadence, and a live toggle for cases where you only need a one-shot render. Built for chat messages, "last updated" badges, activity feeds, audit trails — anywhere a static date string would feel stale.
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 relative-time-text text effect into my projectRelated Components
Countdown Text
Counts down to a target date with per-digit flip
Clock Text
Live digital clock with pulsing colon
Counting Number
Animated number tween from one value to another
Sliding Number
Slot-machine sliding digits for changing numbers
Rolling Text
Slot-machine letter roll for word transitions
LCD Text
Seven-segment LCD-styled numeric display
FAQ
Was this page helpful?
Sign in to leave feedback.