Relative Time Formats 1 - Custom formats

Basic

RelativeTime with custom date and time format options.

Shadcn Relative Time Formats 1 component

Component data

ID: relative-time/relative-time-formats-1
Access: basic
Created: May 23, 2026
Type: example
Libraries: Radix UI, Base UI, React Aria

Relative Time Formats 1 component design & features

This example uses the Kibo UI RelativeTime component with custom dateFormatOptions and timeFormatOptions passed to Intl.DateTimeFormat. RelativeTimeZoneDate and RelativeTimeZoneDisplay render the formatted values.

Custom formats suit locale-aware dashboards, event schedules, and reporting views where default long dates or second precision are not needed.