Forms
Calendar
A month-grid date picker with single or range selection.
Usage
October 2026
M
T
W
T
F
S
S
Installation
npm install @wunderui/reactThen import what you need:
import { Calendar, CalendarProps } from "@wunderui/react"Examples
Day · small
A single day cell at 32 px.
Day · medium
A single day cell at 36 px.
Month · single date
Pick one day.
September 2026
M
T
W
T
F
S
S
Month · range
A start and an end day with the days between tinted.
September 2026
M
T
W
T
F
S
S
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Book a demo
Pick a day in the calendar, then a time slot.
API Reference
| Prop | Type | Default |
|---|---|---|
| mode | "single" | "range" | "single" |
| selected | Date | { from?: Date; to?: Date } | — |
| onSelect | (value) => void | — |