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 选择器会同时切换它们。

// Works out of the box with shadcn's dark mode setup
<ThemeProvider attribute="class" defaultTheme="system">
  <DatePicker value={value} onChange={setValue} />
</ThemeProvider>

shadcn 注册表

您还可以通过 shadcn CLI 直接安装组件：

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

这会将组件源代码复制到您项目的 components/ui/ 目录中，让您可以直接修改它。

超出 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>