A
Aether UI

Calendar

A fully styled date-picker calendar built on react-day-picker v9. Supports single, multiple, and range selection modes with full token styling — no extra CSS import required.

Built on Radix UI.

  • ✓Built on react-day-picker v9
  • ✓Single, multiple, and range selection modes
  • ✓Full token styling — uses design system colors, border-radius, and spacing
  • ✓No CSS import required — all styles applied via className props
  • ✓Outside days visible by default, easily hidden via showOutsideDays={false}
  • ✓Navigation arrows built with Lucide icons, styled to match Button variants
May 2026
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

import { Calendar }from "@aetherstack/ui"

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

export function CalendarDemo() {
  return <Calendar />
}

Usage

Single date selection

Controlled single-date picker using the mode="single" prop.

May 2026

Date range selection

Range mode highlights a start and end date along with all days in between.

May 2026

Props

PropTypeDefaultDescription
mode"single" | "multiple" | "range" | "default""default"Selection mode. Use 'single' for one date, 'multiple' for several, 'range' for a start–end span.
selectedDate | Date[] | DateRange | undefined—The currently selected date(s). Type depends on the mode prop.
onSelect(value: ...) => void—Callback fired when the user selects a date. Receives the new selected value.
showOutsideDaysbooleantrueWhether to render days from the previous and next months in the current month grid.
disabledMatcher | Matcher[]—Dates or date matchers that should be disabled and non-interactive.
classNamestring—Additional class names applied to the root DayPicker element.

* Required props

Accessibility

  • →Uses native button elements for day cells — fully keyboard navigable with arrow keys.
  • →Selected and disabled states are communicated via aria-selected and aria-disabled.
  • →Navigation buttons include visible focus rings and meet contrast requirements.
  • →Screen readers announce month/year via the caption element.