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>Select a date</Label>
      <DatePicker value={date} onChange={setDate} />
      <Button onClick={() => console.log(date)}>Submit</Button>
    </div>
  );
}

ダークモード

shadcn/uiプロジェクトがnext-themesをclassストラテジーで使用している場合、ダークモードは自動的に機能します。shadcnとデイトピッカーの両方が同じCSS変数を読み取り、.darkセレクターが両方を切り替えます。

// shadcnのダークモード設定でそのまま動作します
<ThemeProvider attribute="class" defaultTheme="system">
  <DatePicker value={value} onChange={setValue} />
</ThemeProvider>

shadcnレジストリ

ℹ️ 近日公開

完全なshadcn/uiレジストリの統合が計画されています。これにより、次のコマンドでデイトピッカーをインストールできるようになります:

Terminal window
npx shadcn@latest add react-date-range-picker

それまでは、npmパッケージを直接インストールし、構造的なカスタマイズにはCompound Component APIを使用してください。

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>