Timestamp

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Timestamp — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class timestamp, with 0 modifiers:

• .timestamp

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Timestamp } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { Timestamp } from "@wizeworks/silicaui-react";
import { Section, Stack } from "../lib/Section";

const now = Date.now();
const MIN = 60_000;
const HOUR = 60 * MIN;
const DAY = 24 * HOUR;

export function TimestampDemo() {
    return (
        <>
            <Section title="Auto (relative within 24h, absolute beyond)">
                <Stack>
                    <p>
                        Just now — <Timestamp value={now - 30_000} />
                    </p>
                    <p>
                        5 minutes ago — <Timestamp value={now - 5 * MIN} />
                    </p>
                    <p>
                        3 hours ago — <Timestamp value={now - 3 * HOUR} />
                    </p>
                    <p>
                        2 days ago — <Timestamp value={now - 2 * DAY} />
                    </p>
                    <p>
                        2 months ago — <Timestamp value={now - 60 * DAY} />
                    </p>
                </Stack>
            </Section>

            <Section title="Forced format">
                <Stack>
                    <p>
                        Relative — <Timestamp value={now - 3 * DAY} format="relative" />
                    </p>
                    <p>
                        Absolute — <Timestamp value={now - 3 * DAY} format="absolute" />
                    </p>
                </Stack>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Timestamp — dependency-free Intl-formatted date text. Computed once at render time (no live "3m ago" ticking without a JS runtime); props.value is an ISO date string, props.format picks relative vs. absolute. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Timestamp", "timestamp", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "timestamp timestamp-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

nothing — this one is static markup