Headless · SSR-safe · ≤16 KB

Seven date primitives. One API.

Kalyx ships DatePicker, RangePicker, TimePicker, DateTimePicker, MonthPicker, YearPicker, and WeekPicker under one composition API. Zero CSS, SSR-safe, ISO-8601 in/out.

Get Started →Star on GitHub

$pnpm add @kalyx/react

Kalyx — DatePicker, RangePicker, TimePicker, DateTimePicker, MonthPicker, YearPicker, WeekPicker

What you get

Primitives that stay out of your way

Zero CSS

No stylesheet to import. Style every part with your existing system — Tailwind, shadcn, CSS Modules, plain CSS.

SSR-safe

No window/document access at render time. Works inside React Server Components, Next.js App Router, and Remix loaders.

Timezone-aware

IANA timezones via date-fns-tz, DST-aware. ISO-8601 UTC strings in, ISO-8601 UTC strings out — your storage layer stays clean.

≤16 KB gzipped

All seven pickers + hooks + the date-fns adapter. A quarter of react-datepicker. Tree-shakable — pay only for what you import.

Same JSX, your styles

One component. Every styling story.

Pass any class string to any part. No CSS file to import, no theme provider to wrap. The library never touches your design system.

Tailwind

<DatePicker value={iso} onChange={setIso}>
  <DatePicker.Input
    className="border rounded px-2 py-1" />
  <DatePicker.Popover>
    <DatePicker.Calendar classNames={{
      day: 'rounded hover:bg-slate-100',
      daySelected: 'bg-indigo-600 text-white',
    }} />
  </DatePicker.Popover>
</DatePicker>

shadcn / cva

<DatePicker value={iso} onChange={setIso}>
  <DatePicker.Input className={cn(inputBase)} />
  <DatePicker.Popover>
    <DatePicker.Calendar classNames={{
      day: cn(dayBase),
      daySelected: cn(dayBase, daySelected),
    }} />
  </DatePicker.Popover>
</DatePicker>

Plain CSS

<DatePicker value={iso} onChange={setIso}>
  <DatePicker.Input className="kx-input" />
  <DatePicker.Popover>
    <DatePicker.Calendar classNames={{
      day: 'kx-day',
      daySelected: 'kx-day-selected',
    }} />
  </DatePicker.Popover>
</DatePicker>

All seven primitives

Pick the one you came for.

DatePicker

Single date with calendar popover.

Docs →

RangePicker

Start-end range with hover preview + presets.

Docs →

TimePicker

12 / 24-hour hour-minute lists with AM/PM toggle.

Docs →

DateTimePicker

Date + time as one ISO string. Composable parts.

Docs →

MonthPicker

12-month grid. Value = first day of the month.

Docs →

YearPicker

12-year decade grid. Value = Jan 1 of the year.

Docs →

WeekPicker

Single-click whole-week selection. Value = DateRange.

Docs →

Why Kalyx

Headless without the assembly.

react-day-picker is headless but only ships Calendar. react-datepicker is integrated but forces its CSS on you. Kalyx is the one that's both — every primitive, no stylesheet, ≤16 KB.

Read the docs →

Ready in 60 seconds

Install. Compose. Ship.

1. Install

$pnpm add @kalyx/react

Quick Start →Try the Playground

2. Compose

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

function BirthdayField() {
  const [iso, setIso] = useState<string | null>(null);
  return (
    <DatePicker value={iso} onChange={setIso}>
      <DatePicker.Input />
      <DatePicker.Popover>
        <DatePicker.Calendar />
      </DatePicker.Popover>
    </DatePicker>
  );
}