Skip to main content

Kalyx

Kalyx is a headless React DatePicker library that ships complete. Seven composable pickers — DatePicker, RangePicker, TimePicker, DateTimePicker, MonthPicker, YearPicker, and WeekPicker — behind one consistent API.

import { DatePicker } from '@kalyx/react';

<DatePicker value={iso} onChange={setIso}>
  <DatePicker.Input />
  <DatePicker.Trigger />
  <DatePicker.Popover>
    <DatePicker.Calendar />
  </DatePicker.Popover>
</DatePicker>

See it in action​

All seven pickers, recorded from the live playground. Styling is demo-only — Kalyx ships zero CSS.

DatePicker demo
DatePicker
RangePicker demo
RangePicker
TimePicker demo
TimePicker
DateTimePicker demo
DateTimePicker
MonthPicker demo
MonthPicker
YearPicker demo
YearPicker
WeekPicker demo
WeekPicker

Why Kalyx exists​

The React ecosystem in 2026 has two extremes — and nothing in between:

OptionWhat it offersWhat it doesn't
react-day-pickerHeadless, accessible calendar gridNo input, no time, no range out of the box
react-datepickerAll-in-one features60 KB, required CSS, Date-object API, timezone pitfalls
Ark UI / React AriaComposition patternsNo TimePicker (Ark), heavy dependencies (Aria)

Kalyx fills the gap:

  • Headless philosophy — no stylesheets, no classes you must override.
  • Integrated primitives — 7 pickers (DatePicker, RangePicker, TimePicker, DateTimePicker, MonthPicker, YearPicker, WeekPicker) share one context model.
  • Composition first — Radix-style dot notation. No 100-prop monoliths.
  • ~18.5 KB gzip (≤ 20 KB ceiling) — measured, enforced in CI.
  • SSR-safe — tested with Next.js App Router.
  • ISO 8601 UTC strings as the value contract — no Date-object footguns.
  • Timezone-aware — opt-in displayTimezone prop handles DST and civil-day semantics without changing the UTC storage contract. See the Timezone concept page.

Who it's for​

  • Teams already using Tailwind, shadcn/ui, Chakra, or their own design system, who want date UI that obeys their tokens.
  • Apps that care about bundle size — the whole set of pickers lands in roughly the space one competitor's single picker takes, under a CI-enforced ceiling, and unused pickers are eliminated (TimePicker alone ~16.2 KB vs ~25.0 KB for all seven). See Troubleshooting → bundle size.
  • Anything running on Next.js, Remix, or other SSR/RSC environments.

What's in the box​

@kalyx/react                @kalyx/core
─────────────────────       ─────────────────────
<DatePicker>                DateFnsAdapter
<RangePicker>               getCalendarDays
<TimePicker>                isDateDisabled
<DateTimePicker>            setTime / getTime
<MonthPicker>               formatInTimezone
<YearPicker>                getMonthName
<WeekPicker>                parseInputValue
useDatePicker               normalizeISO
useRangePicker              DEFAULT_*_LABELS
useTimePicker               …and more

Next steps​