Headless · SSR-safe · 20 KB 이하
7개의 날짜 프리미티브. 하나의 API.
Kalyx는 DatePicker · RangePicker · TimePicker · DateTimePicker · MonthPicker · YearPicker · WeekPicker를 하나의 Composition API로 제공합니다. CSS 없음, SSR 안전, ISO-8601 그대로 입출력.
$pnpm add @kalyx/react
7날짜 프리미티브
≤20 KBgzip, 전체 피커 포함
0import할 CSS 파일
WCAG AA기본 제공 접근성
제공하는 것
방해되지 않는 프리미티브
Zero CSS
import할 스타일시트 없음. Tailwind · shadcn · CSS Modules · 순수 CSS 등 기존 스타일링 시스템으로 모든 파트를 직접 꾸미세요.
SSR 안전
렌더 시점에 window/document 접근 없음. RSC, Next.js App Router, Remix loader 안에서도 그대로 동작합니다.
Timezone-aware
플랫폼 자체 Intl 기반 IANA timezone, DST까지 처리, 추가 의존성 없음. 입력도 출력도 ISO-8601 UTC string — 저장 계층은 깔끔하게.
20 KB gzip 이하
7종 picker + hook + date-fns 어댑터 전부 포함. 기본 엔트리에 20 KB CI 한계를, 더 큰 headless 엔트리에는 별도로 22 KB 한계를 적용합니다.
같은 JSX, 당신의 스타일
하나의 컴포넌트. 모든 스타일링 시나리오.
어떤 파트에도 원하는 클래스 문자열을 넘기세요. import할 CSS 파일도, 감쌀 테마 프로바이더도 없습니다. 라이브러리가 디자인 시스템을 침범하지 않습니다.
<DatePicker value={iso} onChange={setIso}>
<DatePicker.Calendar classNames={{
day: 'rounded hover:bg-slate-100',
daySelected: 'bg-indigo-600 text-white',
}} />
</DatePicker>7종 프리미티브
찾던 그 picker를 고르세요.
왜 Kalyx인가
조립 비용 없는 Headless.
react-day-picker는 headless지만 Calendar뿐. react-datepicker는 통합이지만 CSS를 강제합니다. Kalyx는 둘 다 — 모든 프리미티브, 스타일시트 없음, 20 KB 이하.
문서 보기 →60초면 준비 완료
설치 → 조합 → 출시.
2. 조합
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>
);
}