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

Installation

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

pnpm exec frontfriend download calendar -f react --primitive base

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

Usage

import { Calendar } from "@/components/ui/calendar";
import * as React from "react";
function CalendarDemo({ disabled }: { disabled?: boolean }) {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md"
      disabled={disabled}
    />
  );
}
<CalendarDemo disabled={false} />;

Examples

Default

import { Calendar } from "@/components/ui/calendar";
import * as React from "react";
function CalendarDemo({ disabled }: { disabled?: boolean }) {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md"
      disabled={disabled}
    />
  );
}
<CalendarDemo disabled={false} />;

Range

import { DateRange } from "react-day-picker";
import { addDays } from "date-fns";
import { Calendar } from "@/components/ui/calendar";
import * as React from "react";
function CalendarRangeDemo({ disabled }: { disabled?: boolean }) {
  const [date, setDate] = React.useState<DateRange | undefined>({
    from: new Date(2022, 0, 20),
    to: addDays(new Date(2022, 0, 20), 20),
  });
  return (
    <Calendar
      disabled={disabled}
      initialFocus
      mode="range"
      defaultMonth={date?.from}
      selected={date}
      onSelect={setDate}
      numberOfMonths={2}
    />
  );
}
<CalendarRangeDemo disabled={false} />;

Months

import { Calendar } from "@/components/ui/calendar";
import * as React from "react";
function CalendarMonthsDemo({ disabled }: { disabled?: boolean }) {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      variant="months"
      selected={date}
      onMonthSelect={(month, year) => setDate(new Date(year, month, 1))}
      className="rounded-md"
      disabled={disabled}
    />
  );
}
<CalendarMonthsDemo disabled={false} />;

Years

import { Calendar } from "@/components/ui/calendar";
import * as React from "react";
function CalendarYearsDemo({ disabled }: { disabled?: boolean }) {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      variant="years"
      selected={date}
      onYearSelect={(year) => setDate(new Date(year, date?.getMonth() ?? 0, 1))}
      className="rounded-md"
      disabled={disabled}
    />
  );
}
<CalendarYearsDemo disabled={false} />;

API reference

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

Prop	Type	Default
`buttonVariant`	`NonNullable<Parameters<typeof buttonVariants>[0]>["variant"]`	`"ghost"`
`customMonths`	`string[]`	`—`
`customYears`	`number[]`	`—`
`onMonthSelect`	`(month: number, year: number) => void`	`—`
`onYearSelect`	`(year: number) => void`	`—`
`showHeader`	`boolean`	`true`
`variant`	`"default" \| "range" \| "years" \| "months"`	`"default"`

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