🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Calendar

A date picker component that displays a calendar for selecting dates.

Calendar provides an intuitive visual interface for date selection, showing a monthly grid of dates that users can click to select. It supports single date selection, date ranges, multiple date selection, and various configurations like disabling specific dates, showing week numbers, or customizing the display format. Calendars are commonly used in booking systems, scheduling applications, date filters, or any interface requiring date input.

Built on top of react-day-picker with full keyboard navigation (Arrow keys to move between dates, Enter/Space to select, Page Up/Down for months), accessibility support including proper ARIA attributes and roles, and extensive customization options.

Example

December 2025

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

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

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

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

Calendar
CalendarDayButton

Props

`<CalendarDayButton>`

Prop	Type	Default	Description
`day` *	`CalendarDay`	-	The day to render.
`modifiers` *	`Modifiers`	-	The modifiers to apply to the day.

Examples

December 2025

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

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

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

Month And Year Selector

December 2025

Selected date: 12/1/2025

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"

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

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        captionLayout="dropdown"
        fromYear={2020}
        toYear={2030}
        className="rounded-md border"
      />
      {date && (
        <p className="text-muted-foreground text-sm">
          Selected date: {date.toLocaleDateString()}
        </p>
      )}
    </div>
  )
}

Range

December 2025

January 2026

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"
import type { DateRange } from "react-day-picker"

export function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: undefined,
    to: undefined,
  })

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="range"
        selected={range}
        onSelect={setRange}
        numberOfMonths={2}
        className="rounded-md border"
      />
      {range?.from && (
        <p className="text-muted-foreground text-sm">
          {range.to
            ? `Selected range: ${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
            : `Start date: ${range.from.toLocaleDateString()}`}
        </p>
      )}
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

calendar

Additional Classes

Other CSS classes used by this component:

-dropdown
-ghost
-nav
-next
-previous
-text
button
calendar
calendar-button
calendar-caption-label
calendar-chevron
calendar-day
calendar-day-button
calendar-disabled
calendar-dropdown
calendar-dropdown-root
calendar-dropdowns
calendar-hidden
calendar-month
calendar-month-caption
calendar-months
calendar-nav
calendar-outside
calendar-range-end
calendar-range-middle
calendar-range-start
calendar-today
calendar-week
calendar-week-number
calendar-week-number-cell
calendar-week-number-header
calendar-weekday
calendar-weekdays
label

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Button Card

On This Page

Example Installation Components Props <CalendarDayButton>Examples Month And Year Selector Range Styling Component Slots Additional Classes Accessibility

Contribute

Calendar

A date picker component that displays a calendar for selecting dates.

Example

December 2025

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

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

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

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

Calendar
CalendarDayButton

Props

`<CalendarDayButton>`

Prop	Type	Default	Description
`day` *	`CalendarDay`	-	The day to render.
`modifiers` *	`Modifiers`	-	The modifiers to apply to the day.

Examples

December 2025

"use client"

import { useState } from "react"
import { Calendar } from "@strongtie/design-system/calendar"

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

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

Month And Year Selector

December 2025

Selected date: 12/1/2025

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"

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

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        captionLayout="dropdown"
        fromYear={2020}
        toYear={2030}
        className="rounded-md border"
      />
      {date && (
        <p className="text-muted-foreground text-sm">
          Selected date: {date.toLocaleDateString()}
        </p>
      )}
    </div>
  )
}

Range

December 2025

January 2026

"use client"

import * as React from "react"
import { Calendar } from "@strongtie/design-system/calendar"
import type { DateRange } from "react-day-picker"

export function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: undefined,
    to: undefined,
  })

  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar
        mode="range"
        selected={range}
        onSelect={setRange}
        numberOfMonths={2}
        className="rounded-md border"
      />
      {range?.from && (
        <p className="text-muted-foreground text-sm">
          {range.to
            ? `Selected range: ${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
            : `Start date: ${range.from.toLocaleDateString()}`}
        </p>
      )}
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

calendar

Additional Classes

Other CSS classes used by this component:

-dropdown
-ghost
-nav
-next
-previous
-text
button
calendar
calendar-button
calendar-caption-label
calendar-chevron
calendar-day
calendar-day-button
calendar-disabled
calendar-dropdown
calendar-dropdown-root
calendar-dropdowns
calendar-hidden
calendar-month
calendar-month-caption
calendar-months
calendar-nav
calendar-outside
calendar-range-end
calendar-range-middle
calendar-range-start
calendar-today
calendar-week
calendar-week-number
calendar-week-number-cell
calendar-week-number-header
calendar-weekday
calendar-weekdays
label

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Button Card

On This Page

Example Installation Components Props <CalendarDayButton>Examples Month And Year Selector Range Styling Component Slots Additional Classes Accessibility

Contribute

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa