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. Every picker has a renderToString test, and the published entries carry the 'use client' directive for React Server Components.
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, so your storage layer stays clean.
~19 KB gzipped
One DatePicker, minified with its dependencies bundled and React external. All seven pickers plus hooks are ~26 KB. CI also gates the published file at 20 KB for the default entry and 22 KB for the headless entry.
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.
Build a date with new Date in Seoul, store it, and the server sees the day before. Kalyx never takes a Date: values go in and out as ISO 8601 UTC strings, and the display timezone is a separate prop. On top of that, a list-style TimePicker and month, year, and week pickers share the same composition API.
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>
);
}