# Interface: CustomComponents

Map of the components that can be changed using the `components` prop.

## See

https://github.com/gpbl/react-day-picker/tree/main/src/components

## Properties

### Caption()?

> `optional` **Caption**: (`props`) => `null` \| `Element`

The component for the caption element.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`CaptionProps`](CaptionProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:325](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L325)

***

### CaptionLabel()?

> `optional` **CaptionLabel**: (`props`) => `null` \| `Element`

The component for the caption element.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`CaptionLabelProps`](CaptionLabelProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:327](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L327)

***

### Day()?

> `optional` **Day**: (`props`) => `null` \| `Element`

The component for the day element.

Each `Day` in DayPicker should render one of the following, according to
the return value of [useDayRender](../functions/useDayRender.md).

- An empty `Fragment`, to render if `isHidden` is true
- A `button` element, when the day is interactive, e.g. is selectable
- A `div` or a `span` element, when the day is not interactive

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`DayProps`](DayProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:338](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L338)

***

### DayContent()?

> `optional` **DayContent**: (`props`) => `null` \| `Element`

The component for the content of the day element.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`DayContentProps`](DayContentProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:340](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L340)

***

### Dropdown()?

> `optional` **Dropdown**: (`props`) => `null` \| `Element`

The component for the drop-down elements.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`DropdownProps`](DropdownProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:342](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L342)

***

### Footer()?

> `optional` **Footer**: (`props`) => `null` \| `Element`

The component for the table footer.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`FooterProps`](FooterProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:344](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L344)

***

### Head()?

> `optional` **Head**: () => `null` \| `Element`

The component for the table’s head.

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:346](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L346)

***

### HeadRow()?

> `optional` **HeadRow**: () => `null` \| `Element`

The component for the table’s head row.

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:348](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L348)

***

### IconDropdown()?

> `optional` **IconDropdown**: (`props`) => `null` \| `Element`

The component for the small icon in the drop-downs.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`StyledComponent`](../type-aliases/StyledComponent.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:350](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L350)

***

### IconLeft()?

> `optional` **IconLeft**: (`props`) => `null` \| `Element`

The arrow left icon (used for the Navigation buttons).

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`StyledComponent`](../type-aliases/StyledComponent.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:354](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L354)

***

### IconRight()?

> `optional` **IconRight**: (`props`) => `null` \| `Element`

The arrow right icon (used for the Navigation buttons).

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`StyledComponent`](../type-aliases/StyledComponent.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:352](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L352)

***

### Months()?

> `optional` **Months**: (`props`) => `null` \| `Element`

The component wrapping the month grids.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`MonthsProps`](../type-aliases/MonthsProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:356](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L356)

***

### Row()?

> `optional` **Row**: (`props`) => `null` \| `Element`

The component for the table rows.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`RowProps`](RowProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:358](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L358)

***

### WeekNumber()?

> `optional` **WeekNumber**: (`props`) => `null` \| `Element`

The component for the week number in the table rows.

#### Parameters

| Parameter | Type |
| :------ | :------ |
| `props` | [`WeekNumberProps`](WeekNumberProps.md) |

#### Returns

`null` \| `Element`

#### Source

[src/types/DayPickerBase.ts:360](https://github.com/gpbl/react-day-picker/blob/9ad13dc72fff814dcf720a62f6e3b5ea38e8af6d/src/types/DayPickerBase.ts#L360)