shadcn/ui 호환성

Tailwind v4 패키지는 shadcn/ui 프로젝트와 바로 호환되도록 설계되었습니다. 동일한 시맨틱 토큰 컨벤션을 사용하므로, 프로젝트에 이미 shadcn/ui가 설정되어 있다면 날짜 선택기가 자동으로 테마와 일치하게 됩니다.

작동 원리

shadcn/ui는 다음과 같은 시맨틱 CSS 변수를 정의합니다:

--background
--foreground
--primary
--primary-foreground
--muted-foreground
--accent
--accent-foreground
--destructive
--border
--input
--ring

react-date-range-picker-tailwind4 컴포넌트는 Tailwind 유틸리티 클래스(bg-primary, text-foreground, border-border 등)를 통해 동일한 토큰 이름을 사용합니다. 두 시스템 모두 동일한 CSS 변수를 참조하므로, 피커는 기존 테마를 상속받습니다.

설정 없이 바로 사용하기

shadcn/ui 프로젝트가 있다면, 패키지를 설치하고 바로 사용하세요:

Terminal window
npm install react-date-range-picker-tailwind4
import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";


export function MyDatePicker() {
  const [value, setValue] = useState<Date | null>(null);
  return <DatePicker value={value} onChange={setValue} />;
}

추가적인 토큰 정의나 CSS 변경이 필요 없습니다. 피커는 기존의 --color-primary, --color-background 등을 그대로 사용합니다.

토큰 매핑

피커 토큰이 shadcn/ui 토큰에 어떻게 대응되는지는 다음과 같습니다:

피커 사용처Tailwind 클래스shadcn 토큰
팝업 배경bg-popover--popover
팝업 텍스트text-popover-foreground--popover-foreground
선택된 날짜bg-primary--primary
선택된 날짜 텍스트text-primary-foreground--primary-foreground
날짜 호버bg-accent--accent
날짜 호버 텍스트text-accent-foreground--accent-foreground
음소거된 텍스트text-muted-foreground--muted-foreground
지우기 버튼text-destructive--destructive
테두리border-border--border
트리거 테두리border-input--input
포커스 링ring-ring--ring

shadcn 컴포넌트와 함께 사용하기

날짜 선택기는 다른 shadcn/ui 컴포넌트와 나란히 배치할 수 있으며 시각적으로 일치합니다:

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { DatePicker } from "react-date-range-picker-tailwind4";


export function DateForm() {
  const [date, setDate] = useState<Date | null>(null);


  return (
    <div className="flex flex-col gap-2">
      <Label>날짜를 선택하세요</Label>
      <DatePicker value={date} onChange={setDate} />
      <Button onClick={() => console.log(date)}>제출</Button>
    </div>
  );
}

다크 모드

만약 shadcn/ui 프로젝트에서 class 전략으로 next-themes를 사용한다면, 다크 모드는 자동으로 작동합니다. shadcn과 날짜 선택기 모두 동일한 CSS 변수를 읽고, .dark 선택자가 두 가지를 모두 전환합니다.

// shadcn의 다크 모드 설정과 바로 연동됩니다
<ThemeProvider attribute="class" defaultTheme="system">
  <DatePicker value={value} onChange={setValue} />
</ThemeProvider>

Registro di shadcn

Puoi anche installare i componenti direttamente tramite la CLI di shadcn:

Terminal window
npx shadcn add https://dsikeres1.github.io/react-date-range-picker/r/date-picker.json
npx shadcn add https://dsikeres1.github.io/react-date-range-picker/r/date-range-picker.json
npx shadcn add https://dsikeres1.github.io/react-date-range-picker/r/date-time-picker.json
npx shadcn add https://dsikeres1.github.io/react-date-range-picker/r/date-range-time-picker.json
npx shadcn add https://dsikeres1.github.io/react-date-range-picker/r/time-picker.json

Questo copia il codice sorgente del componente nel tuo progetto in components/ui/, permettendoti di modificarlo direttamente.

shadcn 기본값 이상으로 커스터마이징하기

피커를 나머지 shadcn 테마와 다르게 보이게 하려면, 래퍼에 토큰 오버라이드를 범위 지정하세요:

.custom-picker {
  --color-primary: oklch(0.55 0.25 300);
  --color-primary-foreground: oklch(0.98 0.01 300);
  --color-accent: oklch(0.95 0.05 300);
}
<div className="custom-picker">
  <DatePicker value={value} onChange={setValue} />
</div>