shadcn/ui Compatibility

The Tailwind v4 package is designed to be compatible with shadcn/ui projects out of the box. It uses the same semantic token convention, so if your project already has shadcn/ui set up, the date picker will match your theme automatically.

Why It Works

shadcn/ui defines semantic CSS variables like:

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

The react-date-range-picker-tailwind4 components use the same token names through Tailwind utility classes (bg-primary, text-foreground, border-border, etc.). Since both systems reference the same CSS variables, the picker inherits your existing theme.

Zero-Config Setup

If you have a shadcn/ui project, install the package and use it directly:

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 additional token definitions or CSS changes needed. The picker will use your existing --color-primary, --color-background, etc.

Token Mapping

Here’s how the picker tokens correspond to shadcn/ui tokens:

Using Alongside shadcn Components

The date picker can be placed alongside other shadcn/ui components and will visually match:

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

Dark Mode

If your shadcn/ui project uses next-themes with the class strategy, dark mode works automatically. Both shadcn and the date picker read from the same CSS variables, and your .dark selector switches them both.

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

npm vs shadcn Registry

There are two ways to use this package in a shadcn/ui project:

npm is simpler — install, import CSS, use. Registry gives you full ownership of the source code, same as how shadcn/ui’s built-in components (Button, Dialog, etc.) work.

shadcn Registry

Install components directly via the shadcn CLI:

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

This copies the component source into your project, letting you modify it directly. No CSS file imports are needed — the copied components use Tailwind utility classes that reference your existing shadcn tokens.

Customizing Beyond shadcn Defaults

If you want the picker to look different from the rest of your shadcn theme, scope the token overrides to a 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>