Command Palette

Search for a command to run...

Docs
Calendar Twin

Calendar Twin

A dual-view calendar component with month and year selection modes

Loading...

Installation

Props

PropTypeDefaultDescription
valueDate-Currently selected date
onChange(date: Date) => void-Callback when date is selected
classNamestring-Additional CSS classes
yearRange[number, number][2000, 2035]Range of years to display

Usage

import { CalendarTwin } from "@/components/ui/calendar-twin";
 
function MyCalendar() {
  const [selectedDate, setSelectedDate] = React.useState<Date>(new Date());
 
  return (
    <CalendarTwin
      value={selectedDate}
      onChange={setSelectedDate}
      yearRange={[2020, 2030]}
    />
  );
}