7개의 날짜 프리미티브. 하나의 API.
Kalyx는 DatePicker · RangePicker · TimePicker · DateTimePicker · MonthPicker · YearPicker · WeekPicker를 하나의 Composition API로 제공합니다. CSS 없음, SSR 안전, ISO-8601 그대로 입출력.
방해되지 않는 프리미티브
Zero CSS
import할 스타일시트 없음. Tailwind · shadcn · CSS Modules · 순수 CSS 등 기존 스타일링 시스템으로 모든 파트를 직접 꾸미세요.
SSR 안전
렌더 시점에 window/document 접근 없음. 7종 picker 모두 renderToString 테스트가 있고, 배포 엔트리에는 React Server Components 를 위한 'use client' 지시어가 붙어 있습니다.
Timezone-aware
플랫폼 자체 Intl 기반 IANA timezone, DST까지 처리, 추가 의존성 없음. 입력도 출력도 ISO-8601 UTC string 이라 저장 계층이 깔끔합니다.
gzip 약 19 KB
DatePicker 하나를 의존성까지 묶어 minify 하고 React 는 외부로 둔 크기입니다. 7종 picker + 훅 전부는 약 26 KB. 배포 파일에는 CI 한계를 따로 둡니다(기본 엔트리 20 KB, headless 엔트리 22 KB).
하나의 컴포넌트. 모든 스타일링 시나리오.
어떤 파트에도 원하는 클래스 문자열을 넘기세요. import할 CSS 파일도, 감쌀 테마 프로바이더도 없습니다. 라이브러리가 디자인 시스템을 침범하지 않습니다.
<DatePicker value={iso} onChange={setIso}>
<DatePicker.Calendar classNames={{
day: 'rounded hover:bg-slate-100',
daySelected: 'bg-indigo-600 text-white',
}} />
</DatePicker>찾던 그 picker를 고르세요.
조립 비용 없는 Headless.
서울에서 new Date 로 만든 날짜를 저장하면 서버에는 전날로 들어갑니다. Kalyx 는 Date 를 받지 않습니다. 값은 ISO 8601 UTC 문자열로 주고받고, 표시 타임존은 별도 prop 입니다. 여기에 목록형 TimePicker 와 월·연·주 피커가 같은 조합형 API 를 씁니다.
문서 보기 →설치 → 조합 → 출시.
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>
);
}