Relative Time Card
A hover card that displays relative time relative to local time with timezone information.
Installation
pnpm dlx shadcn@latest add @diceui/relative-time-cardExamples
With Multiple Timezones
With Variants
API Reference
RelativeTimeCard
The main component that displays relative time with hover functionality.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-popup-open] |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Opens/closes the relative time card. |
| Enter | Opens the relative time card if closed. |
Credits
- John Phamous - For the initial implementation.