Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Calendar for React

Select a date, dates, or a range from an inline calendar.

Ark UIBase UIReact AriaRadix UI

September 2026

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
7
8
9
10

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/calendar.json

Anatomy

Calendar
├── CalendarClearTrigger
├── CalendarContent
├── CalendarControl
├── CalendarInput
├── CalendarLabel
├── CalendarMonthSelect
├── CalendarNextTrigger
├── CalendarPositioner
├── CalendarPresetTrigger
├── CalendarPrevTrigger
├── CalendarViewDate
├── CalendarTable
│   ├── CalendarTableBody
│   ├── CalendarTableCell
│   │   └── CalendarTableCellTrigger
│   ├── CalendarTableHead
│   ├── CalendarTableHeader
│   └── CalendarTableRow
├── CalendarTrigger
├── CalendarView
│   ├── CalendarViewControl
│   └── CalendarViewTrigger
└── CalendarYearSelect

Usage

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

KeyDescription
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

RangeCalendar

PropType
AttributeType
data-range-end?string
data-range-middle?string
data-range-start?string
data-selected-single?string
CSS variableType
--cell-radiusstring
--cell-sizestring