shadcn/ui Kompatibilität

Das Tailwind v4-Paket ist so konzipiert, dass es standardmäßig mit shadcn/ui-Projekten kompatibel ist. Es verwendet dieselbe semantische Token-Konvention. Wenn Ihr Projekt also bereits shadcn/ui eingerichtet hat, passt der Date-Picker automatisch zu Ihrem Theme.

Warum es funktioniert

shadcn/ui definiert semantische CSS-Variablen wie:

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

Die react-date-range-picker-tailwind4-Komponenten verwenden dieselben Token-Namen über Tailwind-Utility-Klassen (bg-primary, text-foreground, border-border, etc.). Da beide Systeme auf dieselben CSS-Variablen verweisen, erbt der Picker Ihr vorhandenes Theme.

Zero-Config-Einrichtung

Wenn Sie ein shadcn/ui-Projekt haben, installieren Sie das Paket und verwenden Sie es direkt:

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

Es sind keine zusätzlichen Token-Definitionen oder CSS-Änderungen erforderlich. Der Picker verwendet Ihre vorhandenen --color-primary, --color-background, usw.

Token-Zuordnung

So entsprechen die Picker-Token den shadcn/ui-Token:

Picker-VerwendungTailwind-Klasseshadcn-Token
Popup-Hintergrundbg-popover--popover
Popup-Texttext-popover-foreground--popover-foreground
Ausgewählter Tagbg-primary--primary
Text des ausgewählten Tagestext-primary-foreground--primary-foreground
Tag-Hoverbg-accent--accent
Tag-Hover-Texttext-accent-foreground--accent-foreground
Gedämpfter Texttext-muted-foreground--muted-foreground
Löschen-Buttontext-destructive--destructive
Ränderborder-border--border
Trigger-Randborder-input--input
Fokus-Ringring-ring--ring

Verwendung neben shadcn-Komponenten

Der Date-Picker kann neben anderen shadcn/ui-Komponenten platziert werden und passt visuell dazu:

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

Dunkelmodus

Wenn Ihr shadcn/ui-Projekt next-themes mit der class-Strategie verwendet, funktioniert der Dunkelmodus automatisch. Sowohl shadcn als auch der Date-Picker lesen aus denselben CSS-Variablen, und Ihr .dark-Selektor schaltet beide um.

// Funktioniert standardmäßig mit der Dunkelmodus-Einrichtung von shadcn
<ThemeProvider attribute="class" defaultTheme="system">
  <DatePicker value={value} onChange={setValue} />
</ThemeProvider>

shadcn-Registry

ℹ️ Bald verfügbar

Eine vollständige Integration der shadcn/ui-Registry ist geplant. Dies ermöglicht die Installation des Date-Pickers über:

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

Bis dahin installieren Sie das npm-Paket direkt und verwenden Sie die Compound Component API für strukturelle Anpassungen.

Anpassungen über die shadcn-Standards hinaus

Wenn Sie möchten, dass der Picker anders aussieht als der Rest Ihres shadcn-Themes, beschränken Sie die Token-Überschreibungen auf einen 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>