Range Calendar

A date range calendar that lets users pick a start and end date from a visual month grid, built on React Aria with vanilla CSS styling.

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

import RangeCalendar from "@/components/ui/css-rangecalendar";

export default function RangeCalendarDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <RangeCalendar aria-label="Trip dates" />
    </div>
  );
}