Range Calendar — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Radix UI.

Installation

Complete project setup first. Your configuration must select react/radix and include your Design System ID.

pnpm exec frontfriend download range-calendar -f react --primitive radix

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<RangeCalendar
  defaultValue={{
    from: new Date(2026, 7, 4),
    to: new Date(2026, 7, 10),
}}
  disabled={false}
  captionLayout="default"
/>

Examples

Default

<RangeCalendar defaultValue={{
    from: new Date(2026, 7, 4),
    to: new Date(2026, 7, 10),
}} />

Month And Year Selectors

<RangeCalendar captionLayout="dropdown" customYears={[2025, 2026, 2027]} />

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

RangeCalendar

Prop	Type	Default
`captionLayout`	`RangeCalendarCaptionLayout`	`"default"`
`customMonths`	`string[]`	`—`
`customYears`	`number[]`	`—`
`defaultValue`	`DateRange`	`—`
`onValueChange`	`(value: DateRange \| undefined) => void`	`—`
`showHeader`	`boolean`	`true`
`value`	`DateRange`	`—`

RangeCalendarNextButton

Prop	Type	Default	Description
`variant`	`React.ComponentProps<typeof Button>["variant"]`	`"ghost"`

RangeCalendarPrevButton

Prop	Type	Default	Description
`variant`	`React.ComponentProps<typeof Button>["variant"]`	`"ghost"`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.