Design System Builder

Calendar

Calendar is a compound component that provides calendar functionality.

Active
December 2025

Examples

mode

Different mode options for the Calendar component.

single

December 2025

multiple

December 2025

range

December 2025

Installation

npm install @your-design-system/calendar
"use client"

import * as React from "react"
import { Calendar } from "@/components/ui/calendar"

export function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

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

API Reference

PropTypeDefaultDescription
modeenumsingle

The mode prop for the component.

Options: single | multiple | range

selectedstring-

The selected prop for the component.

onSelectstring-

The onSelect prop for the component.

disabledbooleanfalse

Whether the component is disabled.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

p-3rounded-mdborder

mode Variants

single

multiple

range

Design System Compliance

This component is validated against atomic design principles and foundation token usage.