Skip to main content

Get Started

To start using DayPicker in your project add react-day-picker to your dependencies:

yarn add react-day-picker@next # when using yarn
npm install react-day-picker@next # when using npm


import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const [selected, setSelected] = React.useState<Date | undefined>();
const footer = selected
? `You selected ${selected.toLocaleDateString()}.`
: 'Please pick a day.';
return <DayPicker mode="single" onSelect={setSelected} footer={footer} />;
March 2021
Please pick a day.


Continue with the tutorial and see how to navigate months.

You can also: