Calendar

since 1.0

Calendar is a date selection component that allows users to view and choose dates from a visual calendar interface.

Example

September 2026

"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"
    />
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

`<Calendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

Variants

buttonVariant

linkdefaultdestructiveoutlinesecondaryghost

Examples

Month And Year Selector

September 2026

Selected date: 9/30/2026

"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

September 2026

October 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>
  )
}

Button Card

Calendar

since 1.0

Calendar is a date selection component that allows users to view and choose dates from a visual calendar interface.

Example

September 2026

"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"
    />
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

`<Calendar>`

Prop	Type	Default	Description
`buttonVariant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

Variants

buttonVariant

linkdefaultdestructiveoutlinesecondaryghost

Examples

Month And Year Selector

September 2026

Selected date: 9/30/2026

"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

September 2026

October 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>
  )
}

Button Card

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