shadcn.io is not affiliated with official shadcn/ui
Shadcn Calendar for React
Select a date, dates, or a range from an inline calendar.
Sep2026September 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/calendar.jsonnpx shadcn@latest add https://kit.dev/r/base/calendar.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/calendar.jsonyarn shadcn@latest add https://kit.dev/r/base/calendar.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add react-day-picker lucide-reactnpm install react-day-picker lucide-reactpnpm add react-day-picker lucide-reactyarn add react-day-picker lucide-reactCopy and paste the following code into your project.
"use client";
import {
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
} from "lucide-react";
import { useEffect, useRef } from "react";
import type React from "react";
import {
DayPicker,
getDefaultClassNames,
type DayButton,
type Locale,
} from "react-day-picker";
import { cn } from "@/lib/utils";
import { Button, buttonVariants } from "@/registry/base/components/button";
Update the import paths to match your project setup.
Anatomy
Calendar
├── CalendarClearTrigger
├── CalendarContent
├── CalendarControl
├── CalendarInput
├── CalendarLabel
├── CalendarMonthSelect
├── CalendarNextTrigger
├── CalendarPositioner
├── CalendarPresetTrigger
├── CalendarPrevTrigger
├── CalendarViewDate
├── CalendarTable
│ ├── CalendarTableBody
│ ├── CalendarTableCell
│ │ └── CalendarTableCellTrigger
│ ├── CalendarTableHead
│ ├── CalendarTableHeader
│ └── CalendarTableRow
├── CalendarTrigger
├── CalendarView
│ ├── CalendarViewControl
│ └── CalendarViewTrigger
└── CalendarYearSelectUsage
import { type DateValue, parseDate } from "@ark-ui/react/date-picker";
import { useState } from "react";
import {
Calendar,
CalendarMonthSelect,
CalendarNextTrigger,
CalendarPrevTrigger,
CalendarTable,
CalendarTableDays,
CalendarViewControl,
CalendarWeekDays,
CalendarYearSelect,
} from "@/components/ui/calendar";const CalendarDemo = () => {
const [value, setValue] = useState<DateValue[]>([parseDate(new Date())]);
const handleValueChange = (details: { value: DateValue[] }) => {
setValue(details.value);
};
return (
<Calendar
className="w-72 rounded-xl border shadow-xs/5"
fixedWeeks
onValueChange={handleValueChange}
value={value}
>
<CalendarViewControl>
<CalendarPrevTrigger />
<CalendarMonthSelect />
<CalendarYearSelect />
<CalendarNextTrigger />
</CalendarViewControl>
<CalendarTable>
<CalendarWeekDays />
<CalendarTableDays />
</CalendarTable>
</Calendar>
);
};Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
Demos
Hijri
A Persian / Hijri / Jalali calendar.
Basic
A basic calendar in the same frame as the other demos.
Range
Use selectionMode="range" to enable range selection.
Caption
Use month and year selects in the control row for dropdown captions.
Presets
Calendar with date presets.
Time
Date and time picker composition with time fields under the calendar.
Booked Dates
Booked dates marked unavailable with a line-through style.
Custom Days
Per-day prices inside the same calendar frame.
Week Numbers
Use showWeekNumbers to show week numbers.
Multiple
Use selectionMode="multiple" to select multiple dates.
Rtl
Right-to-left calendar. See the RTL configuration guide for document direction.
API Reference
Calendar
PropType
AttributeType
CSS variableType
--cell-radiusstring--cell-sizestringCalendarDayButton
PropType
AttributeType
data-day?stringdata-range-end?stringdata-range-middle?stringdata-range-start?stringdata-selected-single?stringCSS variableType
--cell-radiusstring--cell-sizestring