React Components

Use Tarikh React components when you want semantic date output and predictable accessibility.

Start Here

Import from @coreify/tarikh/react when you want semantic <time> output in React.

What You Get

Component	Use it for
`Tarikh`	Standard date rendering
`Tarikh.Relative`	Relative time like today or yesterday
`Tarikh.Bangla`	Bangla calendar output
`Tarikh.Hijri`	Hijri calendar output

import { Tarikh } from "@coreify/tarikh/react";

const date = "2026-03-31";

<Tarikh value={date} preset="dateTime" />
<Tarikh.Relative value={date} relativeStyle="short" />
<Tarikh.Bangla value={date} locale="bn-BD" />
<Tarikh.Hijri value={date} locale="bn-BD" hijriSystem="islamic-civil" />

Common Props

Prop	Behavior
`value`	Accepts `Date`, timestamps, and date strings
`srLabel`	Overrides the generated `aria-label`
`aria-label`	Used when `srLabel` is not provided

All components render semantic <time> elements with dateTime and aria-label.

Relative Props

Tarikh.Relative uses relativeStyle instead of style so it does not collide with the native React style prop.

<Tarikh.Relative
  value="2026-03-31T10:00:00Z"
  baseDate="2026-03-31T12:00:00Z"
  relativeStyle="short"
/>

Example

import { Tarikh } from "@coreify/tarikh/react";

export function CardDate() {
  return (
    <Tarikh
      value="2026-03-31"
      locale="bn-BD"
      preset="date"
      srLabel="Published date"
    />
  );
}

Notes

Detail	Notes
Semantics	Renders `<time>` elements with `dateTime` and `aria-label`
Runtime	SSR-safe, tree-shakeable, and zero runtime dependencies beyond React
Scope	Keep React imports isolated under `@coreify/tarikh/react`