Calendar

import { Calendar } from "@sigil-ui/components";

"use client";

import { useState } from "react";
import { Calendar } from "@sigil-ui/components";

function CalendarPreview() {
  const [date, setDate] = useState<Date | undefined>(new Date(2026, 4, 12));
  return <div className="grid gap-[var(--s-space-16)] w-full">
    <Calendar mode="single" defaultMonth={new Date(2026, 4, 1)} selected={date} onSelect={setDate} />
    <p role="status" className="text-[var(--s-text-muted)] text-[length:var(--s-size-sm)]">{date ? `Selected: ${date.toLocaleDateString("en-US", { dateStyle: "long" })}` : "Choose a date."}</p>
  </div>;
}

const [range, setRange] = React.useState<DateRange>();

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