Skip to main content

Styling

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.

Default Style

To start with the included styles, import react-day-picker/dist/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/dist/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 { default as defaultStyles } from "react-day-picker/dist/style.module.css";

export function DatePicker() {
return <DayPicker classNames={defaultStyles} />;
}

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.

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

The following table lists the CSS variables used by DayPicker:

Variable NameVariable ValueDescription
--rdp-cell-size40pxSize of the day cells.
--rdp-caption-font-size18pxFont size for the caption labels.
--rdp-accent-color#0000ffAccent color for the background of selected days.
--rdp-accent-color-dark#3003e1Accent color for the background of selected days
--rdp-background-color#e7edffBackground color for the hovered/focused elements.
--rdp-background-color-dark#180270Background color for the hovered/focused elements
--rdp-outline2px solid #0000ffOutline border for focused elements.
--rdp-outline-selected3px solid #0000ffOutline border for focused and selected elements.
--rdp-selected-color#fffColor of selected day text.

Light/Dark Appearance

To toggle between dark and light appearance, you can switch the CSS variables:

[data-theme="dark"] .rdp,
.dark .rdp {
--rdp-accent-color: var(--rdp-accent-color-dark);
--rdp-background-color: var(--rdp-background-color-dark);
}

Custom Style

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.

warning

Mouse hover effects cannot be styled inline.

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