Calendar

An inline month-view date picker grid with previous/next navigation, a highlighted today marker, and a filled selected day, for choosing or clearing a single date.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Calendar to your project and fits it to your theme.

"use client";

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

export default function CalendarStartingMonthDemo() {
  const [renewal, setRenewal] = useState(new Date(2027, 0, 15));
  return <Calendar value={renewal} onChange={setRenewal} />;
}