Headless · SSR-safe · 16 KB 이하

7개의 날짜 프리미티브. 하나의 API.

Kalyx는 DatePicker · RangePicker · TimePicker · DateTimePicker · MonthPicker · YearPicker · WeekPicker를 하나의 Composition API로 제공합니다. CSS 없음, SSR 안전, ISO-8601 그대로 입출력.

시작하기 →GitHub에서 별 주기

$pnpm add @kalyx/react

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

제공하는 것

방해되지 않는 프리미티브

Zero CSS

import할 스타일시트 없음. Tailwind · shadcn · CSS Modules · 순수 CSS 등 기존 스타일링 시스템으로 모든 파트를 직접 꾸미세요.

SSR 안전

렌더 시점에 window/document 접근 없음. RSC, Next.js App Router, Remix loader 안에서도 그대로 동작합니다.

Timezone-aware

date-fns-tz 기반 IANA timezone, DST까지 처리. 입력도 출력도 ISO-8601 UTC string — 저장 계층은 깔끔하게.

16 KB gzip 이하

7종 picker + hook + date-fns 어댑터 전부 포함. react-datepicker의 1/4 크기. tree-shakable — 쓰는 것만 비용 부담.

같은 JSX, 당신의 스타일

하나의 컴포넌트. 모든 스타일링 시나리오.

어떤 파트에도 원하는 클래스 문자열을 넘기세요. import할 CSS 파일도, 감쌀 테마 프로바이더도 없습니다. 라이브러리가 디자인 시스템을 침범하지 않습니다.

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>

7종 프리미티브

찾던 그 picker를 고르세요.

시작-끝 range + hover preview + 프리셋.

문서 →

TimePicker

12/24시간 시·분 리스트, AM/PM 토글.

문서 →

DateTimePicker

날짜 + 시간을 하나의 ISO string으로. 조합형 파트.

문서 →

MonthPicker

12개월 그리드. 값은 해당 월 1일.

문서 →

YearPicker

12년 decade 그리드. 값은 해당 연도 1월 1일.

문서 →

WeekPicker

한 번 클릭으로 한 주 전체 선택. 값은 DateRange.

문서 →

왜 Kalyx인가

조립 비용 없는 Headless.

react-day-picker는 headless지만 Calendar뿐. react-datepicker는 통합이지만 CSS를 강제합니다. Kalyx는 둘 다 — 모든 프리미티브, 스타일시트 없음, 16 KB 이하.

문서 보기 →

60초면 준비 완료

설치 → 조합 → 출시.

1. 설치

$pnpm add @kalyx/react

빠른 시작 →Playground 사용해보기

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>
  );
}