Calendar

A calendar component for date selection with support for single, range, and multiple modes.

1. Import

Import the Calendar component from the design system.

import { Calendar } from "@/design-system/components/ui/calendar"

2. Props

Calendar component props.

Prop	Type	Default
mode	"single" \| "range" \| "multiple"	"single"
selected	Date \| Date[]	--
defaultSelected	Date \| Date[]	--
onSelect	(date: Date \| Date[]) => void	--
disabled	(date: Date) => boolean	--
numberOfMonths	number	1
className	string	--

3. Usages

Common Calendar patterns and configurations.

January 2026

SuMoTuWeThFrSa293031123456789101112131415161718192021222324252627282930311

import { Calendar } from "@/design-system/components/ui/calendar";
import { useState } from "react";

function Example() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  );
}