What is react-day-picker?

DayPicker is a React component library for adding calendar and date picker functionality to web applications. If you are building a website with a form that asks the user to pick a date, a date range, or multiple dates, DayPicker provides the calendar UI component that handles the display and interaction. The preferred package name for version 10 and newer is @daypicker/react. The library is built in TypeScript, which means it includes type definitions out of the box, making it easier to use in TypeScript projects without extra setup. For date calculations and formatting, it relies on date-fns, a widely used JavaScript date utility library. The component compiles to both CommonJS and ESM module formats, so it works across different build setups. One of the key design choices is that DayPicker ships with minimal default styling. You apply your own CSS, or plug in a framework like Tailwind, rather than fighting to override an opinionated visual style. The component supports a wide range of selection modes: single day, multiple days, or a range of days with a start and end. Custom selection logic is also possible. DayPicker handles internationalization by supporting multiple calendar systems beyond the standard Gregorian calendar. Add-on packages provide support for Persian, Hijri, Buddhist, Ethiopic, and Hebrew calendars. You can also set time zones and localize the month and day labels to any language. The component follows WCAG 2.1 AA accessibility guidelines, meaning it is designed to work with screen readers and keyboard navigation. Installation is a single npm command. The full documentation, with live examples and an API reference, is available at daypicker.dev.