ความเข้ากันได้กับ shadcn/ui

แพ็คเกจ Tailwind v4 ถูกออกแบบมาให้เข้ากันได้กับโปรเจกต์ shadcn/ui ตั้งแต่แกะกล่อง โดยใช้ข้อตกลงโทเค็นเชิงความหมาย (semantic token convention) เดียวกัน ดังนั้นหากโปรเจกต์ของคุณมีการตั้งค่า shadcn/ui ไว้อยู่แล้ว ตัวเลือกวันที่จะเข้ากับธีมของคุณโดยอัตโนมัติ

ทำงานอย่างไร

shadcn/ui กำหนดตัวแปร CSS เชิงความหมาย (semantic CSS variables) เช่น:

--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 อยู่แล้ว สามารถติดตั้งแพ็คเกจและใช้งานได้โดยตรง:

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:

การใช้งานร่วมกับคอมโพเนนต์ 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 Registry

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

การปรับแต่งนอกเหนือจากค่าเริ่มต้นของ shadcn

หากคุณต้องการให้ตัวเลือกวันที่ดูแตกต่างจากส่วนที่เหลือของธีม shadcn ของคุณ ให้จำกัดขอบเขตการลบล้างโทเค็น (token overrides) ไว้ใน wrapper:

.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>