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 Reka UI.

Installation

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

pnpm exec frontfriend download range-calendar -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar";

const args = {
  "disabled": false,
  "captionLayout": "default",
} satisfies Partial<
  InstanceType<typeof RangeCalendar> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { captionLayout?: "default" | "dropdown" };
</script>

<template>
  <RangeCalendar v-bind="args" />
</template>

Examples

Default

<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar";

const args = {

} satisfies Partial<
  InstanceType<typeof RangeCalendar> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown>;
</script>

<template>
  <RangeCalendar />
</template>

Month And Year Selectors

<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar";

const args = {

} satisfies Partial<
  InstanceType<typeof RangeCalendar> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown>;
const years = [2025, 2026, 2027];
</script>

<template>
  <RangeCalendar caption-layout="dropdown" :custom-years="years" />
</template>

API reference

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

RangeCalendar

Prop	Type	Default
`captionLayout`	`CaptionLayout`	`—`
`class`	`HTMLAttributes["class"]`	`—`
`customMonths`	`string[]`	`—`
`customYears`	`number[]`	`—`
`showHeader`	`boolean`	`—`

RangeCalendarCell

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

RangeCalendarCellTrigger

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

RangeCalendarGrid

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

RangeCalendarGridRow

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`
`isDayRow`	`boolean`	`—`

RangeCalendarHeadCell

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

RangeCalendarHeader

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

RangeCalendarHeading

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`customValue`	`boolean`	`—`
`type`	`"default" \| "dateSlider"`	`—`

RangeCalendarNextButton

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`customStep`	`number`	`—`
`modelValue`	`any`	`—`
`range`	`boolean`	`—`
`stepUnits`	`"days" \| "months" \| "years"`	`—`
`variant`	`"ghost" \| "tertiary" \| "ghostmain"`	`—`

RangeCalendarPrevButton

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`customStep`	`number`	`—`
`modelValue`	`any`	`—`
`stepUnits`	`"days" \| "months" \| "years"`	`—`
`variant`	`"ghost" \| "tertiary" \| "ghostmain"`	`—`

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