Month Picker

Forms 1

About

4×3 month grid with year stepper, keyboard nav, min/max bounds, single or range mode.

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

Code

How Month Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import {
  MonthPicker,
  MonthPickerTrigger,
  MonthPickerContent,
} from "@/components/ui/month-picker";

export default function MonthPickerDemo() {
  const [value, setValue] = React.useState<
    { year: number; month: number } | undefined
  >(undefined);

  return (
    <div className="flex min-h-[400px] w-full items-center justify-center">
      <MonthPicker mode="single" value={value} onValueChange={setValue}>
        <MonthPickerTrigger className="w-56" />
        <MonthPickerContent />
      </MonthPicker>
    </div>
  );
}