Preview

Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6

Installation

<> import.ts
import { Calendar } from "@/components/ui/calendar"

Code

<> component.tsx
import { Calendar } from "@/components/ui/calendar"

<Calendar />

API Reference

Calendar

A simple month view date picker with navigation and optional Today shortcut.

<> import.ts
import { Calendar } from "@/components/ui/calendar"

Props

PropTypeDefaultDescription
selectedDate
Date—Currently selected date (controlled)
onDateSelect
(date: Date) => void—Called when a day is clicked
className
string""Additional CSS classes
size
"sm" | "md" | "lg""md"Controls overall sizing
showToday
booleantrueHighlights today and shows Go to Today button
disabledDates
Date[][]Dates that cannot be selected

Examples

Example 1
<> example.tsx
// Basic
<Calendar />
Example 2
<> example.tsx
// Controlled
<Calendar selectedDate={selected} onDateSelect={setSelected} />
Example 3
<> example.tsx
// With disabled dates
<Calendar disabledDates={[new Date(2025, 0, 1)]} />