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 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 { Calendar } from "@/components/ui/calendar";

const args = {
  "variant": "default",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Calendar> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?: "default" | "range" | "years" | "months";
  };
</script>

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

Examples

Default

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

const args = {
  "variant": "default",
} satisfies Partial<
  InstanceType<typeof Calendar> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?: "default" | "range" | "years" | "months";
  };
</script>

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

Range

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

const args = {
  "variant": "range",
} satisfies Partial<
  InstanceType<typeof Calendar> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?: "default" | "range" | "years" | "months";
  };
</script>

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

Months

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

const args = {
  "variant": "months",
} satisfies Partial<
  InstanceType<typeof Calendar> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?: "default" | "range" | "years" | "months";
  };
</script>

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

Years

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

const args = {
  "variant": "years",
} satisfies Partial<
  InstanceType<typeof Calendar> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?: "default" | "range" | "years" | "months";
  };
</script>

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

API reference

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

Prop	Type	Default
`captionLayout`	`CaptionLayout`	`—`
`class`	`HTMLAttributes["class"]`	`—`
`customMonths`	`string[]`	`—`
`customYears`	`number[]`	`—`
`modelValue`	`CalendarRootProps["modelValue"] \| RangeCalendarRootProps["modelValue"]`	`—`
`showHeader`	`boolean`	`—`
`variant`	`"default" \| "range" \| "years" \| "months"`	`—`

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