DocumentationAPI referencePlayground

Using DayPicker

Styling and CSS

DayPicker comes with a minimal style inspired by MacOS date pickers, designed to be extended and customized.

You can also use your own styles, or use a CSS framework like Tailwind CSS or Bootstrap to style the calendar.

Using the Default Styles

To start with the included styles, import react-day-picker/style.css into your app. This will add the .rdp class names used by DayPicker.

Using a bundler or a React framework

If you are using a React framework, such as Next.js or Gatsby, or a bundler like Webpack with css-loader, import the CSS file from your app's main JavaScript or TypeScript file:

./app.jsx
import "react-day-picker/style.css";
Importing from a CDN

If you are using a CDN, add the following link to your HTML file:

./index.html
<link rel="stylesheet" href="https://unpkg.com/react-day-picker/style.css" />
Importing the CSS Module

When using CSS modules, you can import style.module.css. Pass the class names to the classNames prop.

./DatePicker.jsx
import { DayPicker } from "react-day-picker";
import dayPickerClassNames from "react-day-picker/style.module.css";
 
export function DatePicker() {
  return <DayPicker classNames={dayPickerClassNames} />;
}

Dark/Light Mode

TODO: this section is still incomplete.

CSS Variables

The default styles use CSS variables to make it easier to customize the base appearance of the calendar. You can override the CSS variables to change the appearance of the calendar.

./global.css
:root {
  --rdp-accent-color: indigo;
  --rdp-background-color: gray;
}

The following table lists the CSS variables used by DayPicker:

TODO: this section is still incomplete.

Custom Styles

Use the classNames prop to use other classnames instead of the default ones.

Tailwind CSS

TODO: this section is still incomplete.

Custom CSS

Inline Styles

To change the appearance of any DayPicker element via inline-styles use the styles prop.

Using inline styles won't override the default class names. Mouse hover effects cannot be styled inline.

const monthCaptionStyle = {
  borderBottom: "1px solid currentColor",
  paddingBottom: "0.5em",
};
// ...
<DayPicker
  styles={{
    month_caption: monthCaptionStyle,
  }}
/>;