Command Palette

Search for a command to run...

Calendar

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

DocsAPI Reference
July 2025

About

The Calendar component is built on top of React DayPicker.

Installation

npx shadcn@latest add calendar

Usage

import { Calendar } from "@/components/xfork-ui/calendar"
const [date, setDate] = React.useState<Date | undefined>(new Date())
return (
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-md border"
/>
)

See the React DayPicker documentation for more information.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

Examples

Form

Your date of birth is used to calculate your age.

React Hook Form

Your date of birth is used to calculate your age.

Changelog

11-03-2024 day_outside color

Changed the color of the day_outside class to the following to improve contrast:

calendar.tsx
"day_outside:
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",