Codeways UI
Browse components

Data display

DateText

'24 Aug 2026' everywhere, or relative time with the absolute date in a tooltip.

@codeways/ui/date-text

Calendar dates

One format everywhere - 'd MMM yyyy', never numeric-only, never month-first.

invoice date
joined date
missing–

Instants

`withTime` shows the org timezone; `relative` refreshes every 60s and keeps the absolute value in `title`.

with time
relative (activity feed)
relative, a day ago

dueLabel

'Due in 5 days' / 'Overdue by 27 days' - the same shape used in tables, the split-view list and reminder emails.

Overdue by 15 days
Due today
Due tomorrow
Due in 10 days
Due 1 Nov 2026

Usage

import { DateText, formatDate, dueLabel } from "@codeways/ui/date-text";

<DateText value={invoice.date} />
<DateText value={payment.recordedAt} relative />

const { text, tone } = dueLabel(invoice.dueDate);
<StatusText tone={tone}>{text}</StatusText>

formatDate(invoice.date); // "24 Aug 2026"