For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Calendar

PreviousNext

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

June 2026
"use client";

import { useState } from "react";

import { Calendar } from "@/components/calendar/calendar";

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/calendar.json

Usage

import { Calendar } from "@/components/ui/calendar/calendar";
<Calendar mode="single" selected={date} onSelect={setDate} />

RTL

To enable right-to-left support, see the RTL guide.

يونيو 2026
"use client";

import * as React from "react";
import { arSA, he } from "react-day-picker/locale";

import { useTranslation } from "@/components/language-selector";

API Reference

The Calendar component is built on top of React DayPicker. See the React DayPicker documentation for the full list of props.