CSS Variables

The styled package uses CSS custom properties (variables) for all visual values. Override them on .rdrp-root or any parent element to customize the appearance without touching component code.

How to Override

All variables are scoped under .rdrp-root. Override them in your own CSS:

/* Your custom theme */
.rdrp-root {
  --rdrp-color-primary: #8b5cf6;
  --rdrp-color-primary-hover: #7c3aed;
  --rdrp-border-radius-lg: 12px;
}

Or scope overrides to a specific instance using a wrapper class:

.my-purple-picker .rdrp-root {
  --rdrp-color-primary: #8b5cf6;
  --rdrp-color-primary-hover: #7c3aed;
  --rdrp-color-primary-light: #ede9fe;
  --rdrp-color-primary-lighter: #f5f3ff;
}
<div className="my-purple-picker">
  <DatePicker value={value} onChange={setValue} />
</div>

Variable Reference

Colors

VariableDefault (Light)Description
--rdrp-color-primary#0ea5e9Primary action color (selected day, confirm button)
--rdrp-color-primary-hover#0284c7Primary hover state
--rdrp-color-primary-light#f0f9ffRange background, light primary accent
--rdrp-color-primary-lighter#f0f9ffActive preset background
--rdrp-color-primary-disabled#7dd3fcDisabled confirm button
--rdrp-color-bg#ffffffBackground color
--rdrp-color-bg-hover#f1f5f9Hover background for days, buttons
--rdrp-color-bg-subtle#f8fafcSubtle background
--rdrp-color-text#0f172aDefault text color
--rdrp-color-text-strong#0f172aStrong text (titles, active time)
--rdrp-color-text-muted#64748bMuted text (nav buttons, labels)
--rdrp-color-text-placeholder#64748bPlaceholder text
--rdrp-color-text-disabled#64748bDisabled day text
--rdrp-color-text-outsidergba(100, 116, 139, 0.5)Outside month days
--rdrp-color-text-inverse#ffffffText on primary backgrounds
--rdrp-color-text-danger#ef4444Clear/danger button text
--rdrp-color-text-today#0ea5e9Today indicator color
--rdrp-color-border#e2e8f0Default border
--rdrp-color-border-light#e2e8f0Light border (popup, selects)
--rdrp-color-border-subtle#e2e8f0Subtle border (footer, presets)
--rdrp-color-border-hoverrgba(14, 165, 233, 0.5)Border hover state
--rdrp-color-highlight-dot#f59e0bHighlight dot color
--rdrp-highlight-dot-size4pxHighlight dot diameter
--rdrp-color-range-bg#f0f9ffIn-range day background
--rdrp-color-hover-range-bgrgba(240, 249, 255, 0.5)Hover range preview background
--rdrp-color-hover-target-bg#e0f2feHover endpoint background
--rdrp-color-time-highlightrgba(14, 165, 233, 0.1)Time panel highlight bar

Typography

VariableDefaultDescription
--rdrp-font-familySystem font stackFont family
--rdrp-font-size-xs11pxExtra small (weekday header in small size)
--rdrp-font-size-sm12pxSmall (weekday headers, labels)
--rdrp-font-size-base13pxBase (day cells, buttons)
--rdrp-font-size-md14pxMedium (trigger, time items)
--rdrp-font-size-lg15pxLarge (header title)
--rdrp-font-weight-normal400Normal weight
--rdrp-font-weight-medium500Medium weight
--rdrp-font-weight-semibold600Semibold weight
--rdrp-font-weight-bold700Bold weight (today indicator)

Spacing

VariableDefaultDescription
--rdrp-spacing-xs2pxExtra small spacing
--rdrp-spacing-sm4pxSmall spacing
--rdrp-spacing-md8pxMedium spacing
--rdrp-spacing-lg12pxLarge spacing
--rdrp-spacing-xl16pxExtra large spacing
--rdrp-spacing-2xl24px2x extra large spacing

Borders

VariableDefaultDescription
--rdrp-border-radius-sm4pxSmall radius
--rdrp-border-radius-md6pxMedium radius (buttons, selects)
--rdrp-border-radius-lg8pxLarge radius (days, trigger)
--rdrp-border-radius-xl12pxExtra large radius (popup)
--rdrp-border-radius-full9999pxFull radius (highlight dot)
--rdrp-border-width1pxBorder width

Shadows

VariableDefaultDescription
--rdrp-shadow-popup0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)Popup shadow
--rdrp-shadow-inlinenoneInline mode shadow
--rdrp-shadow-sm0 2px 6px rgba(0, 0, 0, 0.04)Small shadow

Sizing

VariableDefaultDescription
--rdrp-cell-size36pxDay cell width/height
--rdrp-nav-btn-size28pxNavigation button size
--rdrp-weekday-height28pxWeekday header row height
--rdrp-grid-min-height216pxCalendar grid minimum height
--rdrp-panel-min-width252pxSingle calendar panel width
--rdrp-dual-gap24pxGap between dual calendars
--rdrp-trigger-min-width200pxTrigger button minimum width
--rdrp-trigger-padding-x14pxTrigger horizontal padding
--rdrp-trigger-padding-y8pxTrigger vertical padding
--rdrp-popup-padding16pxPopup inner padding
--rdrp-popup-gap6pxPopup content gap
--rdrp-btn-padding-x14pxFooter button horizontal padding
--rdrp-btn-padding-y6pxFooter button vertical padding
--rdrp-preset-min-width140pxPreset sidebar minimum width

Time Picker

VariableDefaultDescription
--rdrp-time-item-height32pxTime scroll item height
--rdrp-time-panel-height176pxTime panel total height
--rdrp-time-column-height160pxScrollable column height
--rdrp-time-panel-min-width120pxTime panel minimum width
--rdrp-time-colon-width12pxColon separator width
--rdrp-time-picker-content-min-width250pxMinimum width for time picker content

Z-index

VariableDefaultDescription
--rdrp-z-popup50Popup z-index
--rdrp-z-inlineautoInline mode z-index
--rdrp-z-day-button20Focused day z-index

Transitions

VariableDefaultDescription
--rdrp-transition-fast150msFast transitions (day hover)
--rdrp-transition-normal150msNormal transitions (trigger, buttons)

Live Examples

Custom Colors (Purple Theme)

Override primary color variables to create a completely different color scheme. This example uses a DatePicker with violet/purple tones.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


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


  return (
    <div
      style={
        {
          "--rdrp-color-primary": "#7c3aed",
          "--rdrp-color-primary-hover": "#6d28d9",
          "--rdrp-color-primary-light": "#ede9fe",
          "--rdrp-color-primary-lighter": "#f5f3ff",
          "--rdrp-color-primary-disabled": "#c4b5fd",
          "--rdrp-color-text-today": "#7c3aed",
          "--rdrp-color-border-hover": "#c4b5fd",
        } as React.CSSProperties
      }
    >
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Custom Font (Serif)

Fonts cascade through CSS, so wrapping the picker in a div with a custom font-family applies to all text. This example uses a DateRangePicker with Georgia serif.

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CustomFont() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });


  return (
    <div style={{ fontFamily: "'Georgia', serif" }}>
      <DateRangePicker value={value} onChange={setValue} />
    </div>
  );
}

Sharp Corners (No Border Radius)

Set all border radius variables to 0px for a completely square look.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


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


  return (
    <div
      style={
        {
          "--rdrp-border-radius-sm": "0px",
          "--rdrp-border-radius-md": "0px",
          "--rdrp-border-radius-lg": "0px",
          "--rdrp-border-radius-xl": "0px",
        } as React.CSSProperties
      }
    >
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Custom Size via CSS Variables

Instead of using the built-in size prop, override individual sizing variables for precise control. This example uses a DateRangePicker with custom cell size and font sizes.

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CustomSize() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });


  return (
    <div
      style={
        {
          "--rdrp-cell-size": "44px",
          "--rdrp-font-size-base": "15px",
          "--rdrp-font-size-md": "16px",
          "--rdrp-font-size-lg": "18px",
          "--rdrp-spacing-sm": "6px",
          "--rdrp-spacing-md": "10px",
          "--rdrp-spacing-lg": "14px",
        } as React.CSSProperties
      }
    >
      <DateRangePicker value={value} onChange={setValue} />
    </div>
  );
}