Calendar

A date picker component built on react-day-picker v9, with full keyboard navigation, range selection, and theme-aware button styling.

Install

npx shadcn@latest add https://atomx.acau.net/r/calendar.json

Usage

Calendar wraps react-day-picker's DayPicker with consistent button and colour theming. Pass mode="single" for one-date selection, mode="range" for a date range, or mode="multiple" for arbitrary multi-select. Control the selection with selected and onSelect.

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

export function Example() {
  const [date, setDate] = useState<Date | undefined>()

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
    />
  )
}

Preview

Props

Calendar extends React.ComponentProps<typeof DayPicker> and adds one extra prop.