Utilities
import { Time } from "@/components/ui/time";
export function TimeDemo() {Installation#
pnpm dlx shadcn@latest add junwen-k/ui-x/time
Usage#
import { Time } from "@/components/ui/time";<Time />Examples#
Default#
import { Time } from "@/components/ui/time";
export function TimeDemo() {Format#
import { Time } from "@/components/ui/time";
export function TimeFormat() {API Reference#
Time#
Renders a semantic <time> element with a machine-readable dateTime attribute, formatting both with date-fns format.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Date | string | number | - | The date to display. Required. |
formatStr | string | "PPP" | The date-fns format for the visible text. |
dateTimeFormatStr | string | "yyyy-MM-dd" | The date-fns format for the dateTime attribute. |
...props | React.ComponentProps<"time"> | - | Props spread to the <time> element. |