Calendar

A date picker calendar grid with month navigation for selecting a single date, styled with plain CSS (no Tailwind) using custom properties for theming.

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.

import { Calendar } from "@/components/ui/css-calendar";
import { today, getLocalTimeZone } from "@internationalized/date";

export default function CalendarDemo() {
  return (
    <Calendar
      aria-label="Appointment date"
      defaultValue={today(getLocalTimeZone())}
    />
  );
}