Theme Override

The Tailwind v3 package uses concrete Tailwind utility classes (e.g. sky-500, slate-100) for all styling. You can customize the appearance by overriding the theme object exported from the package.

Default Theme

The theme is defined as a set of exported objects, each containing class name strings for a component part. Here’s an overview of the default color palette:

Role	Light Class	Dark Class
Primary	`sky-500`	`sky-500`
Primary text	`sky-500`	`sky-400`
Background	`white`	`slate-950`
Surface hover	`slate-100`	`slate-800`
Text	`slate-900`	`slate-50`
Muted text	`slate-500`	`slate-400`
Border	`slate-200`	`slate-800`
Range bg	`sky-50`	`sky-950/50`
Danger	`red-500`	`red-600`

Theme Object Structure

The theme is split into multiple named exports:

import {
  rootClassNames,
  triggerClassNames,
  headerClassNames,
  gridClassNames,
  dayClassNames,
  footerClassNames,
  contentClassNames,
  rangeClassNames,
  dateTimeClassNames,
  timePanelClassNames,
} from "react-date-range-picker-tailwind3";

Each object contains keys mapping to full Tailwind class strings. For example:

// dayClassNames
{
  day: "flex items-center justify-center w-9 h-9 mx-[1px] rounded-md transition-colors cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 ...",
  today: "font-bold text-sky-500 dark:text-sky-400",
  selected: "bg-sky-500 dark:bg-sky-500 text-white font-semibold ...",
  inRange: "bg-sky-50 dark:bg-sky-950/50 text-slate-900 dark:text-slate-50 rounded-none mx-0 ...",
  rangeStart: "bg-sky-500 dark:bg-sky-500 text-white rounded-r-none mx-0 ...",
  rangeEnd: "bg-sky-500 dark:bg-sky-500 text-white rounded-l-none mx-0 ...",
  // ...
}

Overriding with Compound Components

The most straightforward way to customize the theme is through the Compound Component API. Each part accepts a className prop that is merged with the defaults using twMerge, so conflicting utilities are resolved correctly.

Change Primary Color

Replace sky with violet for the selected day and related states:

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

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

  return (
    <DatePicker.Root value={value} onChange={setValue}>
      <DatePicker.Trigger className="hover:border-violet-500/50 focus-visible:ring-violet-500 focus-visible:border-violet-500" />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton className="focus-visible:ring-violet-500" />
          <DatePicker.Title />
          <DatePicker.NextButton className="focus-visible:ring-violet-500" />
        </DatePicker.Header>
        <DatePicker.Grid
          dayClassName="hover:bg-violet-50 dark:hover:bg-violet-950/50 focus-visible:ring-violet-500"
          dayTodayClassName="text-violet-500 dark:text-violet-400"
          daySelectedClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayInRangeClassName="bg-violet-50 dark:bg-violet-950/50 hover:bg-violet-100"
          dayRangeStartClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayRangeEndClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayFocusedClassName="ring-violet-500"
        />
        <DatePicker.Footer>
          <DatePicker.ClearButton />
          <DatePicker.CancelButton />
          <DatePicker.ConfirmButton className="bg-violet-500 hover:bg-violet-500/90 focus-visible:ring-violet-500" />
        </DatePicker.Footer>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

Custom Background

<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger className="bg-slate-50 dark:bg-slate-900" />
  <DatePicker.Content className="bg-slate-50 dark:bg-slate-900">{/* ... */}</DatePicker.Content>
</DatePicker.Root>

Building a Custom Theme Object

For app-wide rebranding, create a wrapper component that applies your custom classes to all parts:

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

const myTheme = {
  trigger: "hover:border-emerald-500/50 focus-visible:ring-emerald-500",
  dayToday: "text-emerald-500 dark:text-emerald-400",
  daySelected: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  dayInRange: "bg-emerald-50 dark:bg-emerald-950/50 hover:bg-emerald-100",
  dayRangeStart: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  dayRangeEnd: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  confirmButton: "bg-emerald-500 hover:bg-emerald-500/90 focus-visible:ring-emerald-500",
  focusRing: "focus-visible:ring-emerald-500",
};

export function MyDatePicker(props) {
  return (
    <DatePicker.Root {...props}>
      <DatePicker.Trigger className={myTheme.trigger} />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton className={myTheme.focusRing} />
          <DatePicker.Title />
          <DatePicker.NextButton className={myTheme.focusRing} />
        </DatePicker.Header>
        <DatePicker.Grid
          dayTodayClassName={myTheme.dayToday}
          daySelectedClassName={myTheme.daySelected}
          dayInRangeClassName={myTheme.dayInRange}
          dayRangeStartClassName={myTheme.dayRangeStart}
          dayRangeEndClassName={myTheme.dayRangeEnd}
          dayFocusedClassName={myTheme.focusRing}
        />
        <DatePicker.Footer>
          <DatePicker.ClearButton />
          <DatePicker.CancelButton />
          <DatePicker.ConfirmButton className={myTheme.confirmButton} />
        </DatePicker.Footer>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

Use it throughout your app:

<MyDatePicker value={date} onChange={setDate} />

Grid Day Class Props

The Grid component passes day-related className props down to each Day cell. These are the available overrides:

Prop	Default Class Pattern	Description
`dayClassName`	Base day styles	Base classes for all day cells
`dayTodayClassName`	`text-sky-500`	Today indicator
`daySelectedClassName`	`bg-sky-500 text-white`	Selected day
`dayDisabledClassName`	`opacity-50`	Disabled days
`dayOutsideClassName`	`text-slate-500/50`	Outside month days
`dayHighlightedClassName`	`after:bg-amber-500`	Highlight dot
`dayInRangeClassName`	`bg-sky-50`	Days within range
`dayRangeStartClassName`	`bg-sky-500 rounded-r-none`	Range start day
`dayRangeEndClassName`	`bg-sky-500 rounded-l-none`	Range end day
`dayRangeSingleClassName`	`bg-sky-500`	Single-day range
`dayHoverRangeClassName`	`bg-sky-50/50`	Hover preview range
`dayHoverTargetClassName`	`bg-sky-100`	Hover endpoint
`dayFocusedClassName`	`ring-sky-500`	Keyboard focus ring
`dayEmptyClassName`	`invisible`	Empty cell placeholder

Tailwind Content Path

When overriding with custom color classes, ensure they’re included in your Tailwind content paths. Classes defined in your component files are scanned by default, but if you define them in a separate config file, add that path too:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
    // Add your theme config if it's in a separate file
    "./src/config/date-picker-theme.ts",
  ],
};

💡 Tip

If you want semantic token-based theming (like shadcn/ui) instead of concrete color classes, consider using the Tailwind v4 package which uses CSS variable-based semantic tokens.