Ouro HX

Text

LocalDate

A date (and time) in the reader's own time zone and language, in a <time> that carries the exact instant. Only the browser knows the reader's time zone and language, so the server writes the instant in UTC (in en-US unless locale is set), hydration repeats it so the markup matches, and the browser then shows the local one. A date then changes only when the instant falls near midnight, but a time (time, datetime) changes for every reader outside UTC, so the server's text names the zone ("9:30 AM UTC") until the browser takes over. A calendar date with no time ("2026-06-01") is the same day for everyone: it is written the same on the server and in the browser, and the <time> carries that date.

Trail reopens .

Updated

In Spoonjoy

Spoonjoy, a recipe app, is built with Ouro HX (how).

In its source: app/routes/chefs.tsx · app/routes/moderation.tsx · app/routes/users.$identifier.tsx

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/local-date#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/local-date

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/local-date#v1.2.13 ourostack/ouro-ui/local-date-tests#v1.2.13
import { LocalDate } from "@/components/ouro/local-date/local-date";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<LocalDate value={note.updatedAt} format="datetime" />

Use instead when

  • Use RelativeTime instead for "3 days ago", and Intl.DateTimeFormat in your own text for a date inside a sentence you build.

Props

Type: LocalDateProps.

className
Type: string
Layout only. Appearance classes warn in development.
format
Type: "date" | "month" | "datetime" | "time"
Default: "date"
date "Jun 1, 2026", month "Jun 2026", datetime "Jun 1, 2026, 9:30 AM", time "9:30 AM".
locale
Type: Intl.LocalesArgument
Default: the reader's (en-US in the server's text, until the browser takes over)
The language and region to write it in.
ref
Type: Ref<HTMLTimeElement>
Reaches the rendered element.
value (required)
Type: Date | string | number
The instant: a Date, an ISO string or a timestamp in milliseconds. A calendar date with no time ("2026-06-01", or "2026-06" with format="month") is that day for every reader and is never moved into a time zone.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • children: Not a prop. The text is the date; there are no children.
  • date: Not a prop. The instant is value: <LocalDate value={note.createdAt} />.
  • dateTime: Not a prop. The instant is value; the <time> gets its dateTime from it.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2). Your classes always win over Ouro UI's: LocalDate merges className last with cn (tailwind-merge), so a class that conflicts with its own replaces it.layout-classes

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Claim sources

Source on GitHubThis page as Markdown