v2.0.0
Form

Calendar

Supports date selection, ranges, captions, and calendar-specific composition.

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Calendar, CalendarDayButton } from "@line/abc-def-react/calendar";
<script setup lang="ts">
import { Calendar, CalendarDayButton } from "@line/abc-def-vue/calendar";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

React shadcnVue shadcn

Basic usage

June 2026
import { Calendar } from "@line/abc-def-react/calendar";

export function Example() {
  return <Calendar mode="single" selected={new Date(2026, 5, 4)} />;
}
<script setup lang="ts">
import { Calendar } from "@line/abc-def-vue/calendar";
</script>

<template>
  <Calendar layout="month-and-year" />
</template>

Component tokens

Component TokenSemantic TokenDefault Primitive Token
--calendar-bg--background--color-white
--calendar-dropdown-bg--popover--color-white
--calendar-caption-icon-fg--muted-foreground--color-zinc-500
--calendar-weekday-fg--muted-foreground--color-zinc-500
--calendar-week-number-fg--muted-foreground--color-zinc-500
--calendar-range-bg--muted--color-zinc-100
--calendar-today-bg--muted--color-zinc-100
--calendar-today-fg--foreground--color-zinc-950
--calendar-outside-fg--muted-foreground--color-zinc-500
--calendar-disabled-fg--muted-foreground--color-zinc-500
--calendar-selected-bg--primary--color-zinc-900
--calendar-selected-fg--primary-foreground--color-zinc-50
--calendar-range-middle-bg--muted--color-zinc-100
--calendar-range-middle-fg--foreground--color-zinc-950
--calendar-focus-ring--ring--color-zinc-400
--cell-radius--radius-mdcalc(var(--radius) * 0.8)
--cell-sizeLiteral value1.75rem

Composition exports

CalendarCalendarDayButton

Usage notes

  • Pair with form labels when used for input.
  • Confirm range behavior in keyboard navigation.
  • Related component tokens use the `calendar` token group in `@line/abc-def-styles/css`.