Calendar

A date field component that allows users to enter and edit date.

shadcn/ui docs
September 2026

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/calendar.json

About

The calendar is built on top of React DayPicker v9. Check out its docs for all the available props like captionLayout, numberOfMonths, disabled and locale.

If you are upgrading from React DayPicker v8, replace the initialFocus prop with autoFocus and rename any custom classNames keys to their v9 names (day_selected is now selected, nav_button is now button_previous / button_next and so on).

Usage

import { useState } from 'react'
 
import { Calendar } from '@/components/ui/calendar'
const [date, setDate] = useState<Date | undefined>(new Date())
<Calendar mode="single" selected={date} onSelect={setDate} />

Examples

Default

September 2026

Range

January 2026
February 2026