Getting Started with Tailwind CSS v4

The Tailwind v4 package provides date picker components styled with Tailwind CSS v4 utility classes and semantic design tokens.

Choose Your Installation Method

There are 3 ways to install, depending on your project:

npm methods keep components in node_modules — update with npm update. shadcn Registry copies source code into your project — you own it and can modify anything, but updates require re-running the command.

Option A: npm Install (Standalone Tailwind v4)

Your project doesn’t have semantic design tokens like --color-primary, so import rdrp-theme.css which provides a default Slate + Sky palette:

@import "tailwindcss";
@import "react-date-range-picker-tailwind4/rdrp-theme.css";
@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Option B: npm Install (shadcn/ui Projects)

shadcn/ui already defines --color-primary, --color-background, etc. The picker reads these tokens automatically, so no theme file is needed — just the reset (for Tailwind class scanning) and styles:

/* app/globals.css or src/index.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "react-date-range-picker-tailwind4/rdrp-reset.css";
@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Option C: shadcn Registry

Components are copied directly into your project as source code. No CSS import needed — the copied components use Tailwind utility classes (bg-primary, text-foreground, etc.) which reference your existing shadcn tokens.

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 is the same pattern as shadcn/ui’s built-in components (Button, Dialog, etc.) — the source lives in your project, and you can modify it however you want.

Semantic Tokens

The components use --rdrp-* CSS custom properties internally, which map to Tailwind v4 / shadcn semantic tokens via var() with fallback values. If you want to customize the mapping, override the --rdrp-* variables in your CSS.

The rdrp-theme.css file provides a default Slate + Sky palette with these tokens:

Quick Start

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";

function Basic() {
  const [value, setValue] = useState<Date | null>(null);

  return <DatePicker value={value} onChange={setValue} />;
}

What’s Included

All components support:

• Controlled value with value / onChange
• Keyboard navigation
• Dark mode via semantic tokens
• 4 sizes: small, medium, large, x-large
• Compound Component API for customization

TypeScript Types

All configuration and data types are re-exported from the package — no need to install the headless package separately:

import type {
  Locale,
  DatePickerSize,
  TimeConfig,
  MinuteStep,
  SecondStep,
  TimePrecision,
  HourFormat,
  TimePeriod,
  CaptionLayout,
  WeekDay,
  DateRangePreset,
  CalendarMonth,
  DayProps,
} from "react-date-range-picker-tailwind4";

These types are useful for:

• Locale — Custom locale overrides (weekday names, button labels, date formatting)
• DatePickerSize — Typing the size prop ("small" | "medium" | "large" | "x-large")
• TimeConfig — Configuring time picker precision, format, and steps
• DateRangePreset — Defining presets for DateRangePicker / DateRangeTimePicker
• CalendarMonth, DayProps — Custom rendering with Compound Components

See Headless Types for detailed type definitions.

Next Steps

• DatePicker — Single date selection
• DateRangePicker — Date range with presets
• Compound Components — Customize internal structure
• Semantic Tokens — Theme with design tokens
• Dark Mode — Dark theme support