Calendar

"use client"

import * as React from "react"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/calendar.json

Usage

Copyimport { Calendar } from "@/components/ui/calendar"

Copyconst [date, setDate] = React.useState<Date | undefined>(new Date())
 
return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-md border"
  />
)

Examples

Date Range

You can select a range of dates using the mode="range" prop.

"use client"

import * as React from "react"

Multiple Months

Display multiple months using the numberOfMonths prop.

"use client"

import * as React from "react"

With Dropdown Navigation

Use dropdowns to navigate between months and years.

"use client"

import * as React from "react"

API Reference

Calendar

The Calendar component is built on top of React Day Picker.