@taqwim/react-styled

A Hijri calendar and date picker for React that already looks like one.

Built on @taqwim/react (behaviour) and @taqwim/themes (appearance). If you want to build your own markup, use the headless package directly — everything here is composed from its public parts.

Install

pnpm add @taqwim/react-styled

Use

import { HijriCalendar, HijriDatePicker } from '@taqwim/react-styled'
import { useState } from 'react'

export function Example() {
  const [date, setDate] = useState()

  return (
    <>
      <HijriCalendar value={date} onValueChange={setDate} theme="islamic" locale="ar" dir="rtl" />
      <HijriDatePicker value={date} onValueChange={setDate} />
    </>
  )
}

The stylesheet is imported for you.

Calendar systems

Umm al-Qura is the default. Add @taqwim/core directly and pass an imported strategy to use Islamic Civil or Islamic TBLA:

import { islamicCivil } from '@taqwim/core/calendars/islamic-civil'

;<HijriCalendar calendarSystem={islamicCivil} />

Compare the three systems before storing or exchanging Hijri fields.

Theming

theme sets data-taqwim-theme on the calendar, so switching is an attribute change — no stylesheet swapping, and several themes can coexist on one page.

Neutral default · dark · slate · stone · zinc · minimal · minimalist · material

Brand rose · violet · emerald · amber · indigo · teal · crimson · modern · ocean · sunset · nature · neon · cyberpunk · luxurious

Hijri & regional islamic · ramadan · eid · masjid · madinah · andalus · sahara · mihrab · zellige · qamar · najd

size is orthogonal: compact, default, large.

To restyle rather than re-theme, override the tokens — see @taqwim/themes.

Props

Everything @taqwim/react's HijriCalendarRoot accepts, plus:

| | | | ----------------------------- | ---------------------------------------------------------------------- | | theme | Bundled theme name. Default 'default' | | size | 'compact' \| 'default' \| 'large' | | showNavigation | Previous/next buttons. Default true | | showWeekdays | Weekday label row. Default true | | selectableHeading | Month and year heading buttons that open their pickers. Default true | | navigationIcons | { prev?, next? } components replacing the chevrons | | renderCell, renderWeekday | Render props for cell contents and weekday labels |

HijriDatePicker adds format (default 'iYYYY-iMM-iDD'), inputPlaceholder, label and editable. It accepts typed dates in iYYYY-MM-DD or DD-MM-iYYYY, with / or -; unparseable text reverts rather than clearing the selection.

Parity with Vue

@taqwim/react-styled and @taqwim/vue-styled take the same prop names, emit the same attributes and answer the same keys. That is enforced by a shared test suite rather than by review.

License

MIT