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.
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 on the platform’s own Intl, DST-aware, no extra dependency. ISO-8601 UTC strings in, ISO-8601 UTC strings out — your storage layer stays clean.
≤20 KB gzipped
All seven pickers + hooks + the date-fns adapter. The default entry has an explicit 20 KB CI ceiling; the larger headless entry has its own at 22 KB.
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.
<DatePicker value={iso} onChange={setIso}>
<DatePicker.Calendar classNames={{
day: 'rounded hover:bg-slate-100',
daySelected: 'bg-indigo-600 text-white',
}} />
</DatePicker>Pick the one you came for.
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, ≤20 KB.
Read the docs →Install. Compose. Ship.
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>
);
}