Calendar

Installation

npx paubha@latest add calendar

Usage

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

<Calendar
  mode="single"
  value={date}
  onValueChange={setDate}
/>

Examples

Range selection

Accessibility

Follows the WAI-ARIA APG date grid: one Tab stop (roving tabindex), arrow keys move by day/week, Home/End jump to the week start/end, PageUp/PageDown change month, Enter/Space selects. Today carries aria-current="date". CalendarMini (size="sm") and CalendarWeek share the same tokens.