Shadcn Hover Card Live Timestamp

Timestamp hover card with active relative time. Built by composing Badge, Hover Card, Separator. Uses date-fns alongside the shadcn primitives. A free, open source shadcn hover card example you can install with npx shadcn@latest add @reui/c-hover-card-7 and edit as your own code.

Timestamp hover card with active relative time

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A dashed underline relative time inside a sentence, opening the exact deploy time over a live clock that ticks each second

When to use

Profile previews on a person's name or avatar, with photo, handle, role and join date
Feature, image and release note previews shown on hover or focus of a button or link
Exact dates and times behind a short inline label, such as a relative deploy time in a sentence

When not to use

The same timestamp detail opened with a tap on a touch screen: use the Popover component
A one line label that names an icon button or a control: use the Tooltip component
Content that stays visible in the page layout without a pointer over it: use the Card component

Agent notes

referenceTime is always 2 hours before now; set it from your real deploy timestamp
The UTC row runs referenceTime through date-fns format, which prints local time; convert it to UTC or relabel that row
Timing is delay and closeDelay on the base HoverCardTrigger but openDelay and closeDelay on the radix HoverCard root
Without render on the base twin or asChild on radix, HoverCardTrigger renders a link with no href, which Tab skips
The radix HoverCardContent sets tabindex -1 on every link and button inside it, so keep keyboard actions outside the card

Third-party API docs

date-fns v4: docs

Markdownhttps://reui.io/components/hover-card/c-hover-card-7.md

MCPget_example("c-hover-card-7")

Installnpx shadcn@latest add @reui/c-hover-card-7

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Hover Card Live Timestamp

Dependencies

date-fns

What You Can Build With Shadcn Hover Card Live Timestamp

Composes Badge, Hover Card, Separator, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-hover-card-7
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Hover Card Examples

Basic Basic hover card.
Positions Hover card with positions.
Profile Hover card with profile information.
Icon Hover card with icon
Image & Text Hover card with an image and text content.
In Dialog Hover card inside a dialog.
Release Notes Hover card with paginated release notes

Related Shadcn Component Categories

Icon Stack
Icon Tile
Open-source shadcn icon tile components for list row media, feature cards, empty states, and dashboard tiles.
Input
Open-source shadcn input components for form entry, search fields, and auth screens.
Input Group
Open-source shadcn input group components for prefixed inputs, suffixed actions, and combined form controls.
Input Otp
Open-source shadcn OTP input components for verification codes, 2FA flows, and secure confirmation screens.
Item
Open-source shadcn item row components for list rows, settings items, and action rows.

When should I use Shadcn Hover Card Live Timestamp?

Use it for a dashed underline relative time inside a sentence, opening the exact deploy time over a live clock that ticks each second.

Shadcn Hover Card as a whole fits:

Profile previews on a person's name or avatar, with photo, handle, role and join date
Feature, image and release note previews shown on hover or focus of a button or link
Exact dates and times behind a short inline label, such as a relative deploy time in a sentence

For the same timestamp detail opened with a tap on a touch screen, use the Popover component. For a one line label that names an icon button or a control, use the Tooltip component. For content that stays visible in the page layout without a pointer over it, use the Card component.

How do I install Shadcn Hover Card Live Timestamp?

Run npx shadcn@latest add @reui/c-hover-card-7. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Hover Card Live Timestamp free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Hover Card Live Timestamp use?

It composes Badge, Hover Card, Separator. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.