A month grid for picking one date, with full keyboard navigation, range limits and disabled days.
pnpm dlx shadcn@latest add @latheui/calendarPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Calendar is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native div attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | — | Controlled selected date. |
| defaultValue | Date | null | null | Initial date when uncontrolled. |
| onValueChange | (date: Date) => void | — | Called when a day is selected. |
| min | Date | — | Earliest selectable day. Navigation stops at its month. |
| max | Date | — | Latest selectable day. Navigation stops at its month. |
| isDateDisabled | (date: Date) => boolean | — | Return true for days that cannot be selected. |
| weekStartsOn | 0 | 1 | 0 | 0 for Sunday, 1 for Monday. |
| locale | string | "en-US" | Locale for month and weekday names. |
| defaultMonth | Date | current month | Month shown first when there is no value. |
| fixedWeeks | boolean | true | Always show six weeks, so the height stays the same between months. |
| size | "sm" | "default" | "lg" | "default" | Overall scale. Days are 30px, 36px or 44px, with matching type sizes. |
| shape | "rounded" | "square" | "circle" | "rounded" | Shape of the selected and hovered day, and of the month buttons. |
| radius | number | string | — | Corner radius in px, or any CSS length. Overrides the corners set by shape. |
| colors | { selected?, selectedForeground?, hover?, today? } | — | Any CSS color for each day state. Unset ones follow the theme: primary, primary-foreground, accent and ring. |
Calendar is the grid only. Put it in your popover and close it on selection to make a date picker.
<Calendar
value={date}
onValueChange={(next) => {
setDate(next)
setOpen(false)
}}
/>The colors and corners are CSS variables, so a stylesheet or a parent can set them for every calendar at once.
<div className="[--calendar-selected:var(--chart-5)] [--calendar-radius:9999px]">
<Calendar />
</div><Calendar locale="de-DE" weekStartsOn={1} />