@zedtech/zedkit-ui

UpdatedAgo

A relative "Updated N minutes ago" stamp via `Intl.RelativeTimeFormat`, no date library.

beta@zedtech/zedkit-ui

Wraps: (none)

Updated 3 minutes agoUpdated 2 hours ago

View props table

Who is it for?: Developers stamping cached or polled data with its freshness.
When should I use it?: Under data that refreshes (polling, SWR, manual refetch).
When should I pick something else?: For absolute timestamps — render a `<time dateTime>` instead.

Use it

Examples import from the package. With copied source, import from @/components/ui/updated-ago instead.

Simple

import { UpdatedAgo } from "@zedtech/zedkit-ui";
<UpdatedAgo date={Date.now() - 3 * 60 * 1000} /> {/* "Updated 3 minutes ago" via Intl.RelativeTimeFormat */}

Custom prefix

Product catalogue

Synced 4 minutes ago

import { UpdatedAgo } from "@zedtech/zedkit-ui";
<UpdatedAgo date={syncedAt} prefix="Synced" />

Kit not installed yet?

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { UpdatedAgo } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <UpdatedAgo date={Date.now() - 3 * 60 * 1000} /> {/* "Updated 3 minutes ago" via Intl.RelativeTimeFormat */}
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

Static text (not a live region) — screen readers meet it while reading; re-render when the data refreshes. Styled with text-caption text-muted-foreground only.

Troubleshooting

Stamp never changes — it renders once per render; re-render from your polling tick or SWR refresh. Future dates read as “just now” (clamped, never “in 5 minutes”).

StatusLabel

A named live-region label for the current operation state (loading, saved, error…).

OfflineNote

A hook reporting browser online state plus an alert-style note with overridable wording.