Calendar

Date field with a month grid, min/max clamping, manual entry and a clear affordance.

Source: 1 file
Dependencies: none
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Basic

<Calendar />

02Select header

<Calendar useSelectHeader />

03Label + helper

Start date

Choose any upcoming day.

<Calendar label helperText />

04Min / Max

Constrained to this month + next.

<Calendar minDate maxDate />

05Today button

<Calendar showTodayButton />

06Disabled

<Calendar disabled />

07Day shape

<Calendar dayRounded="md" dayBordered />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Calendar } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

calendar-example.tsx

import { Calendar } from "kipui";

<Calendar
  value={date}
  onValueChange={setDate}
  minDate={new Date()}
  showTodayButton
  showClearButton
/>

`value` accepts an ISO `yyyy-MM-dd` string or a `Date`; the callback always hands back a `Date` or `null`.
`allowManualInput` lets people type the date instead of hunting for it in the grid — keep it on for date-of-birth style fields.

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
valuestring \| Date \| null	required	Selected date, ISO string or Date.
onValueChange(date: Date \| null) => void	required	Fires on selection and on clear.
minDateDate \| null	required	Earliest selectable date.
maxDateDate \| null	required	Latest selectable date.
allowManualInputboolean	false	Lets the field be typed into.
showTodayButtonboolean	false	Shortcut to the current date.
showClearButtonboolean	false	Clears back to null.
labelstring	required	Field label.
errorstring	required	Error message; also sets the invalid styling.
helperTextstring	required	Hint shown under the field.
placeholderstring	required	Shown in the field before a date is picked.
disabledboolean	false	Blocks both the field and the grid.
readOnlyboolean	false	Shows the value without allowing a change.
requiredboolean	false	Marks the field required for validation.
requiredSignboolean	false	Draws the asterisk beside the label.
highlightTodayboolean	true	Rings the current date in the grid.
useSelectHeaderboolean	false	Month and year as selects instead of arrows.
dayRounded"none" \| "sm" \| "md" \| "lg" \| "full"	"md"	Corner radius of a day cell.
dayBorderedboolean	false	Rules between the day cells.
fullWidthboolean	false	Stretches the field to its container.
startIconReactNode	required	Replaces the calendar icon before the text.
endIconReactNode	required	Element rendered after the text.
inputClassstring	required	Merged onto the field, not the popover.
aria-labelstring	required	Names the field when there is no visible label.