Compound Components

The Tailwind v4 package exposes a Compound Component API that gives you full control over the internal structure and rendering of each picker. Instead of a single monolithic component, you compose the picker from individual parts.

How It Works

Every picker (e.g. DatePicker) is both a simple component and a namespace of compound parts:

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

// Simple usage -- renders default layout
<DatePicker value={value} onChange={setValue} />

// Compound usage -- full control over structure
<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
    <DatePicker.Footer>
      <DatePicker.ClearButton />
      <DatePicker.CancelButton />
      <DatePicker.ConfirmButton />
    </DatePicker.Footer>
  </DatePicker.Content>
</DatePicker.Root>

With compound components you can:

• Replace any part with your own rendering (e.g. custom trigger, custom day cell)
• Rearrange the layout (e.g. move footer buttons, add a today button)
• Omit parts you don’t need (e.g. drop the footer for a minimal calendar)
• Override classes on any part via the className prop

The following pages walk through each customization pattern with live demos.

Available Parts

DatePicker

DateRangePicker

Includes all the parts above plus:

DateTimePicker / DateRangeTimePicker

Include their respective base parts plus:

TimePicker