Calendar
Date calendar grid built on react-day-picker
Preview
Mo
Tu
We
Th
Fr
Sa
Su
Usage
import { Calendar } from "@/components/ui/calendar"
import { useState } from "react"
function CalendarDemo() {
const [date, setDate] = useState<Date | undefined>(new Date())
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-md border"
/>
)
}Supports mode="single", mode="multiple", and mode="range" for different selection types. Pass captionLayout="dropdown" to enable month/year dropdowns.
Install
npx shadcn add @bonsai/calendar