Skip to main content

Custom Components


This documentation is still a work in progress. If you have any questions, ask to the discussions page on Github.

Use the components prop to replace some of the internal components used by DayPicker with a custom implementation.

For example, if you need to customize the component creating the day cell, you can replace the DayContent component with a custom implementation.

import { type DayContentProps } from "react-day-picker";

/** Replace the 19th with an emoji */
export function CustomDayContent(props: DayContentProps) {
return (
<span style={{ position: "relative", overflow: "visible" }}>
{ === 19 ? ` 🎉` :}

Then passed the custom component to the DayPicker component:

import { CustomDayContent } from "./CustomDayContent";

DayContent: CustomDayContent // Replace the DayContent component

Supported Components

The customizable components are defined in the CustomComponents interface. Pass any of these to the components prop.


The custom components are not part of the stable API yet, and may change in future versions.

CaptionThe caption for each month.
CaptionLabelThe caption for each month.
DayThe day cell.
DayContentThe content of the day cell.
DropdownThe dropdown used for navigation
FooterThe footer element.
HeadThe head of the grid.
HeadRowThe row with the week names.
IconDropdownThe icon used for the dropdown.
IconLeftThe icon used for the previous month navigation.
IconRightThe icon used for the next month navigation.
MonthsWrapper for the Months grid.
RowRender the grid row.
WeekNumberRender the week number.

DayPicker Hooks

When creating custom components, you will find useful the DayPicker hooks.

import { useDayPicker } from "react-day-picker";
useDayPickerDayPickerContextValueGet the props passed to DayPicker.
useNavigationNavigationContextValueNavigate between months and years .
useDayRenderDayRenderRender the day cell from a custom Day component.
useFocusContextFocusContextValueHandle the focus between elements.
useActiveModifiersActiveModifiersReturns the modifiers applied to a day.


Custom Caption

Implement a custom Caption component with next/previous buttons. Note the use of the useNavigation hook to navigate between months.

import { format } from "date-fns";
import { CaptionProps, DayPicker, useNavigation } from "react-day-picker";

function CustomCaptionComponent(props: CaptionProps) {
const { goToMonth, nextMonth, previousMonth } = useNavigation();
return (
{format(props.displayMonth, "MMM yyy")}
onClick={() => previousMonth && goToMonth(previousMonth)}
onClick={() => nextMonth && goToMonth(nextMonth)}

export function CustomCaption() {
return (
Caption: CustomCaptionComponent

Jul 2024


Range Selections with Shift Key

Implement a custom Day component to select ranges while pressing the Shift key. See examples/RangeShiftKey.tsx for the full source code.


Please pick a day.