Form

Calendar

An inline month grid for picking one date: month caption with Today and arrows, 32px day cells, accent selection and a red today marker.

October 2026
SuMoTuWeThFrSa

Wed Oct 14 2026

Usage

  • Use when the calendar is the main content (scheduling, booking panels).
  • Use DatePicker for a date field in a form; it opens this calendar in a popover.
  • Use DateRangePicker for start/end periods.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/CalendarExample.tsx
import { useState } from 'react';
import { Calendar } from '@krackedui/motion';

export function PublishDate() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 9, 14));
  return <Calendar value={date} onValueChange={setDate} />;
}

Examples

Min and max

Days outside the range are struck through and can’t be picked; keyboard focus stays inside.

October 2026
SuMoTuWeThFrSa

Week starts on Monday, other locale

Oktober 2026
MoDiMiDoFrSaSo

Dark theme

October 2026
SuMoTuWeThFrSa

API Reference

Calendar

A <div role="group"> with a caption and a <table role="grid">. The ref goes to the root.

PropTypeDefault
value / defaultValue
Date | null
onValueChange
(value: Date | null) => void
min / max
Date
defaultMonth
Date
value ?? today
onMonthChange
(month: Date) => void
today
Date
new Date()
locale
string
"en-US"
weekStartsOn
01
0
showTodayButton
boolean
true
showOutsideDays
boolean
true
autoFocus
boolean
false
id
string
className
string
style
CSSProperties
aria-label
string
"Calendar"
aria-describedby
string

calendarVariants

Slots: root, months, month, caption, title, navGroup, today, nav, grid, head, cell, day, todayDot.

PropTypeDefault

Accessibility

  • WAI-ARIA date grid: role="grid" labelled by the month caption, weekday columnheaders with full names (abbr), and gridcells with aria-selected.
  • One day is tabbable (roving tabindex). ← → move a day, ↑ ↓ a week, Home / End to the start / end of the week, Page Up / Page Down a month (Shift: a year). Enter / Space select.
  • Each day button is named with the full date ("Wednesday, October 21, 2026"); today has aria-current="date"; out-of-range days are aria-disabled.
  • The month caption is a polite live region, so month changes are announced.
© 2026 Motion. Internal documentation.