react-day-picker

Flexible, accessible date picker component for React — full customization of styles, locales, and selection modes.

react-day-picker

React

Flexible, accessible date picker component for React — full customization of styles, locales, and selection modes.

npm GitHub Docs

Fit

Bundle (gzip)

19.3 kB

67.0 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Date pickers are notoriously hard to build accessibly. Most libraries ship heavyweight UI that clashes with your design, and supporting range selection, disabled dates, and localization requires significant custom code.

What It Does

React Day Picker renders a fully accessible calendar with support for single dates, ranges, and multiple selection. It's unstyled by default with a clean CSS module you can override, and supports date-fns or Day.js for locale formatting.

Installation

bash

npm install react-day-picker

Usage Example

tsx

import { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

export function DateSelector() {
  const [selected, setSelected] = useState<Date>();

  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      disabled={{ before: new Date() }}
      showOutsideDays
    />
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.