Compatibilidad con shadcn/ui

El paquete de Tailwind v4 está diseñado para ser compatible con proyectos de shadcn/ui desde el primer momento. Utiliza la misma convención de tokens semánticos, por lo que si tu proyecto ya tiene configurado shadcn/ui, el selector de fechas coincidirá con tu tema automáticamente.

Por qué funciona

shadcn/ui define variables CSS semánticas como:

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

Los componentes de react-date-range-picker-tailwind4 usan los mismos nombres de token a través de las clases de utilidad de Tailwind (bg-primary, text-foreground, border-border, etc.). Como ambos sistemas hacen referencia a las mismas variables CSS, el selector hereda tu tema existente.

Configuración Cero

Si tienes un proyecto con shadcn/ui, instala el paquete y úsalo directamente:

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

No se necesitan definiciones de tokens adicionales ni cambios en el CSS. El selector usará tus --color-primary, --color-background, etc. existentes.

Mapeo de Tokens

Así es como los tokens del selector corresponden a los tokens de shadcn/ui:

Uso junto a componentes de shadcn

El selector de fechas se puede colocar junto a otros componentes de shadcn/ui y coincidirá visualmente:

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>Selecciona una fecha</Label>
      <DatePicker value={date} onChange={setDate} />
      <Button onClick={() => console.log(date)}>Enviar</Button>
    </div>
  );
}

Modo Oscuro

Si tu proyecto de shadcn/ui usa next-themes con la estrategia class, el modo oscuro funciona automáticamente. Tanto shadcn como el selector de fechas leen de las mismas variables CSS, y tu selector .dark los cambia a ambos.

// Funciona directamente con la configuración del modo oscuro de shadcn
<ThemeProvider attribute="class" defaultTheme="system">
  <DatePicker value={value} onChange={setValue} />
</ThemeProvider>

Registro de shadcn

También puedes instalar componentes directamente mediante la CLI de shadcn:

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

Esto copia el código fuente del componente en tu proyecto en components/ui/, permitiéndote modificarlo directamente.

Personalización más allá de los predeterminados de shadcn

Si quieres que el selector se vea diferente del resto de tu tema de shadcn, acota las sobreescrituras de tokens a un contenedor:

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