React Modular DatePicker

Why Choose React Modular DatePicker?

🧩

Fully Composable

Build your datepicker with modular components. Mix and match to create exactly what you need.

🎨

Highly Customizable

Style with Tailwind, CSS Modules, or any CSS-in-JS solution. Full control over appearance.

🌍

i18n Support

Built-in internationalization with Day.js. Support for multiple languages and date formats.

♿

Accessible

WCAG compliant with keyboard navigation, ARIA labels, and screen reader support.

📦

Lightweight

Small bundle size with tree-shaking support. Only import what you use.

🌙

Dark Mode Ready

Built-in dark mode support that works seamlessly with your theme system.

Simple to Use

import * as DatePicker from '@legeannd/react-modular-datepicker'

function App() {
  const [date, setDate] = useState(null)

  return (
    <DatePicker.Provider
      type='single'
      value={date}
      onSelectionChange={setDate}
    >
      <DatePicker.Header>
        <DatePicker.Button type='previous'>←</DatePicker.Button>
        <DatePicker.Label />
        <DatePicker.Button type='next'>→</DatePicker.Button>
      </DatePicker.Header>
      <DatePicker.Calendar />
    </DatePicker.Provider>
  )
}