Reshaped Calendar

Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled dates, min/max boundaries, localization and a configurable first week day.

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

import { Reshaped } from "reshaped/bundle";
import Calendar from "@/components/ui/reshaped-calendar";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 360, width: "100%", margin: "0 auto", padding: 24 }}>
        <Calendar
          range
          defaultMonth={new Date(2023, 0)}
          defaultValue={{ start: new Date(2023, 0, 10), end: new Date(2023, 0, 14) }}
        />
      </div>
    </Reshaped>
  );
}