Components

Calendar

Single-month picker. Click days to select; chevrons step months. Today is highlighted.

View in Figma
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
<Calendar
  value={value}
  onChange={setValue}
  month={month}
  onMonthChange={setMonth}
  highlighted={TODAY}
/>
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
<Calendar
  value={value}
  onChange={setValue}
  month={month}
  onMonthChange={setMonth}
  highlighted={TODAY}
/>
Props
value:Date | null
Currently selected date. null = no selection.
onChange:(date: Date) => void
Fires when a day is clicked.
month:Date
Month currently visible (day component is ignored).
onMonthChange:(date: Date) => void
Fires when prev/next chevrons are clicked.
highlighted:Date
Date treated as today. Pass a fixed Date from the parent to avoid SSR mismatch.
Tokens