Semantics
Labelled grid, rows, column headers, and gridcell buttons.
Composite inputs · stable · MIT
A locale-aware single-date grid with month navigation and constraints.
Install editable source
Behavior contract
Labelled grid, rows, column headers, and gridcell buttons.
Arrows move by day or week; Home/End use week edges; Page keys move month or year.
Light and dark themes, logical RTL layout, reduced motion, responsive content, and forwarded public refs.
Source-derived reference
These public React parts are read directly from the canonical source during the documentation build.
GummyCalendarGummyCalendarPropsComposes Omit< React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" > & { value?: Date; defaultValue?: Date; onValueChange?: (date: Date) => void; month?: Date; defaultMonth?: Date; onMonthChange?: (month: Date) => void; min?: Date; max?: Date; locale?: string; weekStartsOn?: 0 | 1 | 6; label?: string; }
Troubleshooting
Live product source
The Component Lab exercises real source across default, focus, disabled, responsive, dark, reduced-motion, and RTL contexts.
Open the live Component LabInteractive inspection
Resize the canvas, switch its theme, or reverse its reading direction without changing the rest of the page.
Calendar preview: fluid width, light theme, left to right.
Editable source