@avan-persian/react

React components for Avan Persian Date Picker — a Jalali (Shamsi) calendar and full set of date/time pickers with RTL, Persian digits, Iran holidays, and WCAG-compliant accessibility built in.

Install

pnpm add @avan-persian/react @avan-persian/themes

Import the CSS

Two stylesheets are required, imported once near your app root:

import '@avan-persian/themes/default.css'; // design tokens (colors, spacing, dark mode)
import '@avan-persian/react/client.css'; // calendar/picker structural styles

Quick example

'use client';

import { useState } from 'react';
import { AvanDateRangePicker, AvanProvider } from '@avan-persian/react/client';
import '@avan-persian/themes/default.css';
import '@avan-persian/react/client.css';

export function Example() {
  const [range, setRange] = useState<{ from: Date | null; to: Date | null }>({
    from: null,
    to: null,
  });

  return (
    <AvanProvider dir="rtl" locale="fa-IR">
      <AvanDateRangePicker value={range} onChange={setRange} display="popover" numberOfMonths={2} />
    </AvanProvider>
  );
}

What's inside

AvanCalendar (single/range/multiple/multi-range/week/month/year modes) plus dedicated AvanDatePicker, AvanDateRangePicker, AvanMultiDatePicker, AvanWeekPicker, AvanMonthPicker, AvanYearPicker, AvanTimePicker, and AvanDateTimePicker components — all sharing one AvanProvider for locale/direction/theme, min/max/disabled-date constraints, custom day rendering, keyboard navigation, and screen-reader support.

@avan-persian/react (this package's root import) is types-only and safe for Server Components; interactive components live under @avan-persian/react/client. See Installation → Client vs. server entry points.

Docs

• Quickstart
• API reference
• Theming
• SSR / Next.js
• Live demo

License

MIT © Danial Riazati