# LocalDate A date (and time) in the reader's own time zone and language, in a `` 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 `` carries that date. ```tsx import { LocalDate } from "@/components/ouro/local-date/local-date"; ``` ## Example ```tsx ``` ## 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`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `className` | `string` | | Layout only. Appearance classes warn in development. | | `format` | `"date" \| "month" \| "datetime" \| "time"` | `"date"` | `date` "Jun 1, 2026", `month` "Jun 2026", `datetime` "Jun 1, 2026, 9:30 AM", `time` "9:30 AM". | | `locale` | `Intl.LocalesArgument` | the reader's (en-US in the server's text, until the browser takes over) | The language and region to write it in. | | `ref` | `Ref` | | Reaches the rendered element. | | `value` (required) | `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`: ``. - `dateTime`: Not a prop. The instant is `value`; the `` 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. [^layout-classes]: test:registry/ouro/components/ouro/local-date/local-date.test.tsx::LocalDate > forwards a ref and attributes, and lets app layout classes win verify:testExists(registry/ouro/components/ouro/local-date/local-date.test.tsx::LocalDate > forwards a ref and attributes, and lets app layout classes win)