Shadcn Popover Relative Time

When to use

• Quick edits and settings opened from a button, such as layer dimensions, switches or a volume slider
• Previews opened by a click, such as a person's bio card, a template image with actions or an AI feature pitch
• Inline details and short guides, such as exact times behind a relative date or a stepped feature tour

When not to use

• Exact deploy times revealed while the pointer rests on the label: use the Hover Card component
• A field where the user picks an hour and minute rather than reads them: use the Time Picker component
• A full account page that edits a person's name, avatar, email, team and billing: use the Profile blocks
• A full page of record fields, such as an invoice or a product, ending in a submit row: use the Form blocks
• A task that must block the page and hold focus until the user answers: use the Dialog component

Agent notes

• referenceTime is always 2 hours before now, so pass your real deploy timestamp in its place
• The row badged UTC goes through date-fns format, which prints local time; convert it before showing it as UTC
• now reads the clock in useState during render, so a server rendered page hydrates with other seconds; set it after mount
• Compose PopoverTrigger through render on the base twin and asChild on the radix twin, as every example does; the other twin's prop does not compose
• PopoverContent is w-72 in both twins whatever it holds; size it with a width class such as w-auto or w-64
• The base PopoverTitle names the popup for screen readers; the radix one is a plain div, so give radix PopoverContent an aria-label

Third-party API docs

• date-fns v4: docs