shadcn-errors-react-day-picker-v9

name	shadcn-errors-react-day-picker-v9
description	Use when a shadcn `Calendar` (or any direct `react-day-picker` DayPicker) silently renders nothing, throws a TypeScript error on the `selected` prop, loses every CSS rule after a `react-day-picker` upgrade, shows an unstyled grid of buttons, fails to compile a custom `Caption` / `Day` / `IconLeft` / `IconRight` component, fires a Matcher warning for `disabledDays`, ignores `selectedDays` entirely, throws "DayPickerProps is not a function" or "Cannot read properties of undefined (reading 'mode')", crashes after `npm install react-day-picker@9` on a code base that pre-dates the v9 release, or no longer responds to the `fromMonth` / `toMonth` boundary props. Prevents the v8 syntax in v9 trap (the file compiles but the calendar is read-only, invisible, or unstyled because every prop name moved), the missing `mode` prop trap (v9 makes `mode` mandatory on every `selected` usage and TypeScript fails the type narrowing), the classNames-with-old-keys trap (v9 keys every entry by a `UI` enum string like `day_button` / `month_caption` / `range_start`, the v8 keys `day` / `cell` / `caption` no longer match any element), the Caption-renamed-MonthCaption trap (custom captions registered under `components.Caption` are silently ignored, v9 reads `components.MonthCaption`), the modifiers-as-array trap (v9 expects `modifiers={{ name: Matcher }}` not `modifiers={[...]}`), the formatter-returns-JSX trap (v9 formatters MUST return a `string`, React markup goes through a custom component), the CSS-import-path trap (v8 `react-day-picker/dist/style.css` 404s on v9, use `react-day-picker/style.css`), the boundary-prop trap (`fromMonth` / `toMonth` / `fromDate` / `toDate` were renamed `startMonth` / `endMonth` plus `hidden` matcher), and the Day-renderer trap (custom `<Day>` from v8 expected `(props, ...)` signature and is replaced by `components.DayButton` with `day` / `modifiers` props). Covers the v8 -> v9 prop rename table (selectedDays -> selected, disabledDays -> disabled, modifiers as object of Matchers, Caption -> MonthCaption, IconLeft / IconRight -> single Chevron, Row -> Week, HeadRow -> Weekdays, fromMonth / toMonth -> startMonth / endMonth, fromDate / toDate -> hidden + boundary props), the `mode="single" | "multiple" | "range"` requirement contract, the `classNames` UI-enum key system with `getDefaultClassNames()`, the `dateLib` adapter pattern that replaces direct `date-fns` imports, the `month` / `defaultMonth` controlled vs uncontrolled pair, the formatter string-return contract, the symptoms-to-fix matrix that maps each silent failure mode to the exact prop rename, and the canonical recovery flow `npx shadcn@latest add calendar --overwrite` when the shadcn-side Calendar source is itself a v8 vintage. Keywords: react-day-picker v9, calendar v8 to v9, day-picker breaking change, selectedDays renamed, disabledDays renamed, Caption renamed MonthCaption, mode prop required, calendar TypeScript error, calendar style broken upgrade, dateLib adapter, react-day-picker upgrade, shadcn calendar broken, calendar blank render, calendar invisible after upgrade, calendar lost styles, modifiers as object, modifiers as array error, fromMonth removed, toMonth removed, startMonth endMonth, IconLeft IconRight Chevron, Row Week renamed, HeadRow Weekdays renamed, DayPickerSingleProps renamed PropsSingle, useNavigation useDayPicker, react-day-picker style.css path, dist style.css 404, getDefaultClassNames, UI enum classNames, components.DayButton, custom Day renderer v9, formatter must return string, shadcn add calendar overwrite, issue 4366
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026 with react-day-picker v9 (v9.0.0 released mid-2024, current minor v9.14.x at 2026-05-19).
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

react-day-picker v8 -> v9 Errors in the shadcn Calendar

A shadcn Calendar is a thin wrapper around react-day-picker. The react-day-picker 9.0.0 release (mid-2024) reshaped almost every public prop name, the classNames key system, the components-override surface, and the formatter contract. Every v8 prop name still parses as valid JSX in v9 (selectedDays, disabledDays, modifiers={[...]}, components={{ Caption }}), but the v9 DayPicker simply ignores them. The symptom is therefore SILENT : the page compiles, the calendar mounts, and nothing happens (no selection, no styles, no custom caption). TypeScript narrows the typed errors to a single rule on mode ; the rest manifests as visual breakage.

This skill maps each v8 syntax shape onto its v9 replacement, lists the TypeScript error messages that surface for the typed cases, and documents the canonical recovery flow when the shadcn-side components/ui/calendar.tsx itself pre-dates the v9 release.

Companion skills :

• shadcn-syntax-calendar-datepicker (Batch B7) : the v9 API surface in full and the DatePicker composition recipe (Popover + Calendar + Input). Read this skill FIRST for the green-field v9 syntax ; this errors skill assumes you already know the v9 shape and need to migrate v8 code or diagnose a v8-shape regression.
• shadcn-errors-cli-sync-mismatch : the canonical recovery flow uses npx shadcn@latest add calendar --overwrite when the shadcn-side calendar file is itself stale.
• shadcn-errors-styling-conflicts : when CSS classes look right but the calendar is still unstyled, the react-day-picker/style.css import may have moved.

Quick Reference : v8 -> v9 Prop Rename Table

For every prop the calendar accepts, v9 either keeps the v8 name, renames it, or removes it entirely. This table is the single most important reference in this skill. ALWAYS consult it before changing any prop.

v8 prop / API	v9 prop / API	Type / Notes
selectedDays	selected	Date | Date[] | DateRange | undefined ; matches the mode
disabledDays