Relative Time

This is a shadcn/ui type react component that displays the relative time comparing to the current time

Demo

  import { RelativeTime } from '@/components/ui/relative-time'

  export function InputCopyableDemo() {
    return (
      <div className="flex flex-col gap-4 items-center justify-center">
        <RelativeTime date={new Date()} style="narrow" />
        <RelativeTime date={new Date()} style="long" locale="zh-CN" />
        <RelativeTime date={new Date()} locale="fr-FR" />
      </div>
    )
  }

Installation

npx shadcn@latest add @vinkas-ui/relative-time

Make sure you already have the @vinkas-ui registry added to your components.json file. Read the installation guide for more information.

Properties

Property	Type	Required	Description	Default
date	Date	Yes	The date to display	-
locale	string	No	The locale to use for formatting	"en-US"
style	"short" "long" "narrow"	No	The style to use for formatting	"short"

API Reference

See the Tooltip documentation of shadcn/ui for more information. TooltipTrigger is used as the base component for RelativeTime.

Demo

Installation

Properties

API Reference

On this page