### Install Shadcn-ui Monthpicker via CLI

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Installs the Monthpicker component using the shadcn-ui CLI by fetching the configuration from a remote URL.

```shell
npx shadcn@latest add "https://greenk.dev/r/monthpicker.json"
```

--------------------------------

### Install Shadcn-ui Monthrangepicker via CLI

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Installs the Monthrangepicker component using the shadcn-ui CLI by fetching the configuration from a remote URL.

```shell
npx shadcn@latest add "https://greenk.dev/r/monthrangepicker.json"
```

--------------------------------

### Install Shadcn-ui Popover via CLI

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Installs the optional Popover component using the shadcn-ui CLI, which is often used to wrap the Monthpicker.

```shell
npx shadcn@latest add popover
```

--------------------------------

### Basic MonthRangePicker Usage in React

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Demonstrates a simple implementation of the `MonthRangePicker` component, showing how to manage the selected date range state using React's `useState` hook and pass it via props.

```typescript
import React from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns/format";
import { cn } from "@/lib/utils";
import { MonthRangePicker } from "@/components/ui/monthrangepicker";

export default function Example() {
    const [dates, setDates] = React.useState<{ start: Date; end: Date }>();

    return <MonthRangePicker onMonthRangeSelect={setDates} selectedMonthRange={dates} />;
}
```

--------------------------------

### Basic Shadcn-ui MonthPicker Usage (React/TypeScript)

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Demonstrates a basic implementation of the MonthPicker component in a React functional component using TypeScript, showing how to manage the selected month state.

```typescript
import React from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns/format";
import { cn } from "@/lib/utils";
import { MonthPicker } from "@/components/ui/monthpicker";

export default function Example() {
    const [month, setMonth] = React.useState<Date>();

    return <MonthPicker onMonthSelect={setMonth} selectedMonth={month} />;
}
```

--------------------------------

### MonthRangePicker Integration with shadcn-ui Popover

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Shows how to integrate the `MonthRangePicker` component within a shadcn-ui `Popover` for a common UI pattern, including formatting the displayed date range and handling the popover trigger.

```typescript
export default function Example() {
    const [dates, setDates] = React.useState<{ start: Date; end: Date }>();

    return (
        <Popover>
            <PopoverTrigger asChild>
                <Button variant={"outline"} className={cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground")}>
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {dates ? `${format(dates.start, "MMM yyyy")} - ${format(dates.end, "MMM yyyy")}` : <span>Pick a month range</span>}
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
                <MonthRangePicker onMonthRangeSelect={setDates} selectedMonthRange={dates} />
            </PopoverContent>
        </Popover>
    );
}
```

--------------------------------

### Shadcn-ui MonthPicker Usage with Popover (React/TypeScript)

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Illustrates how to integrate the MonthPicker component within a shadcn-ui Popover, providing a common pattern for displaying the picker in a dropdown.

```typescript
export default function Example() {
    const [date, setDate] = React.useState<Date>();

    return (
        <Popover>
            <PopoverTrigger asChild>
                <Button variant={"outline"} className={cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground")}>
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {date ? format(date, "MMM yyyy") : <span>Pick a month</span>}
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
                <MonthPicker onMonthSelect={setDate} selectedMonth={date} />
            </PopoverContent>
        </Popover>
    );
}
```

--------------------------------

### Defining Zod Schema for Form in TypeScript

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Defines a Zod schema for integrating the month picker and month range picker with shadcn forms, specifying the expected structure for single month and month range selections.

```TypeScript
const FormSchema = z.object({
    month: z.date(),
    monthrange: z.object({
        start: z.date(),
        end: z.date()
    })
});
```

--------------------------------

### Defining Month Type in TypeScript

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Defines the structure for a `Month` object used within the month picker components, specifying its numeric representation and name.

```typescript
type Month = { number: number; name: string };
```

--------------------------------

### Defining ButtonVariant Type in TypeScript

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Defines the possible string literal values and null/undefined for the `ButtonVariant` type, used for styling various buttons in the components.

```typescript
type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined;
```

--------------------------------

### Defining ButtonVariant Type in TypeScript

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Defines the `ButtonVariant` type, which is a union of possible string literal values and null/undefined, likely used for styling buttons according to shadcn-ui conventions.

```TypeScript
type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined;
```

--------------------------------

### Defining Month Type in TypeScript

Source: https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/README.md

Defines the `Month` type used within the component, specifying its structure including month number, name, and year offset for distinguishing between calendars in a range view.

```TypeScript
type Month = { number: number; name: string; yearOffset: number }; // yearOffset = 0 on the left calendar and 1 on the right side calendar
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.