Kalyx

The headless React DatePicker, finally complete.

Docs · 한국어 · npm · README.ko

Kalyx ships a complete set of date-related React primitives — single dates, date ranges, time, date+time, month, year, and week — under one composition API. ~18.5 KB gzip (≤20 KB ceiling), zero CSS, SSR-safe.

pnpm add @kalyx/react

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

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

onChange always returns ISODateString | null — UTC-safe, no Date objects.

In 2026, the React date-picker landscape forces a trade-off: integrated-but-heavy (react-datepicker ~62 KB, MUI ~58 KB) or headless-but-partial (react-day-picker — calendar grid only; Ark UI — no standalone TimePicker; React Aria — @internationalized/date lock-in). react-calendar covers single dates and ranges but stops short of time, RSC, and timezone-aware storage. react-native-calendars is mobile-first.

Kalyx ships seven primitives — single date, range, time, date+time, month, year, week — under one composition API. Headless, ~18.5 KB gzip, SSR-safe, ISO strings in / ISO strings out, adapter pattern for date-fns / dayjs / luxon.

• Zero CSS — bring your own (Tailwind, shadcn/ui, Chakra, plain CSS).
• Composition API — Radix-style dot notation. No prop explosions.
• SSR-safe — Next.js App Router verified.
• ISO 8601 UTC strings — eliminates Date-object footguns.
• IANA timezone-aware — opt-in displayTimezone handles DST without changing storage.
• Accessible — WAI-ARIA + full keyboard, axe-clean.
• i18n-ready — locale prop (Intl-based month/weekday/AM-PM names, locale-inferred week start) + RTL via the dir prop.
• Per-picker tree-shaking — unused pickers are eliminated: TimePicker alone measures ~16.2 KB gzip against ~25.0 KB for all seven. Verify with pnpm check-tree-shaking.
• TypeScript strict — no any.

7 composable pickers + 7 headless hooks (3 on the main entry, 4 more on @kalyx/react/headless):

import {
  DatePicker, RangePicker, TimePicker, DateTimePicker,
  MonthPicker, YearPicker, WeekPicker,
  useDatePicker, useRangePicker, useTimePicker,
} from '@kalyx/react';

import {
  useMonthPicker, useYearPicker, useWeekPicker, useDateTimePicker,
} from '@kalyx/react/headless';

API reference, recipes (Tailwind / shadcn / React Hook Form), and migration guides live in the full docs.

Recorded from the live playground. Styling is demo-only — Kalyx ships zero CSS.

DatePicker	RangePicker	TimePicker
DateTimePicker	MonthPicker	YearPicker
WeekPicker

• Introduction · Quick Start
• Components · Hooks
• Recipes · Testing · Troubleshooting
• Migration from react-datepicker / react-day-picker / React Aria

@kalyx/react → ~18.5 KB gzip. CI gate: ≤ 20 KB for the default entry (ESM + CJS); the larger headless entry is gated separately at ≤ 22 KB.

React 19+ · all modern browsers · SSR: Next.js App Router / Pages Router / Remix · Node ≥ 20.

pnpm install
pnpm test            # unit + component
pnpm typecheck
pnpm lint
pnpm build
pnpm check-bundle    # ≤ 20 KB

See CLAUDE.md for architecture principles.

MIT © 2026 Kalyx contributors.