Calendar — Aspyn Design System

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Calendar } from "@aspyn-io/kit";

Single date

August 2026

const [date, setDate] = React.useState<Date | undefined>(new Date());

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

Date picker (Popover composition)

The standard date-picker pattern: a Calendar inside a Popover.

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="outline" className="w-56 justify-start font-normal">
      <CalendarIcon />
      {date ? format(date) : "Pick a date"}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar mode="single" selected={date} onSelect={(d) => { setDate(d); setOpen(false); }} />
  </PopoverContent>
</Popover>

Range selection

August 2026

<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />

Notes

Built on react-day-picker v9 — disabled dates, min/max, and localization all pass through.
The dispatch date strip is a Tabs-like custom control; use Calendar for arbitrary date selection.

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa