Calendar

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

shadcn/ui docs →

Preview

March 2026

Selected: 3/6/2026

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/calendar.json

Dependencies: react-day-picker

Usage

example.tsx
import { Calendar } from "@/components/ui/calendar"
import { useState } from "react"

const [date, setDate] = useState<Date | undefined>(new Date())

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-base border-2 border-border"
/>
0