Calendar

A date picker calendar component for selecting a single date. Supports controlled and uncontrolled modes.

Basic

Use state to track the selected date and display it below the calendar.

Prop	Type	Default	Description
`value`	`Date \| null`	—	The currently selected date (controlled).
`defaultValue`	`Date`	—	The initially selected date (uncontrolled).
`onValueChange`	`(date: Date \| null) => void`	—	Called when the selected date changes.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the selected date indicator.
`className`	`string`	—	Additional CSS classes.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

Date | null

The currently selected date (controlled).

defaultValue

Date

The initially selected date (uncontrolled).

onValueChange

(date: Date | null) => void

Called when the selected date changes.

color"blue"

Accent color for the selected date indicator.

className

string

Additional CSS classes.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}