### Install Radix UI Icons for DateRangePicker

Source: https://github.com/johnpolacek/date-range-picker-for-shadcn/blob/main/README.md

This command installs the @radix-ui/react-icons package, which provides the icons used by the DateRangePicker component. This step is required unless the component is modified to use a different icon library.

```bash
npm install @radix-ui/react-icons
```

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

### Example Usage of DateRangePicker Component

Source: https://github.com/johnpolacek/date-range-picker-for-shadcn/blob/main/README.md

This example demonstrates how to integrate and configure the DateRangePicker component. It sets an initial date range, customizes alignment and locale, hides the compare feature, and logs selected values to the console via the onUpdate callback.

```jsx
<DateRangePicker
  onUpdate={(values) => console.log(values)}
  initialDateFrom="2023-01-01"
  initialDateTo="2023-12-31"
  align="start"
  locale="en-GB"
  showCompare={false}
/>
```

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

### Install Shadcn UI Dependencies for DateRangePicker

Source: https://github.com/johnpolacek/date-range-picker-for-shadcn/blob/main/README.md

This command uses the Shadcn UI CLI to add necessary components like Button, Calendar, Label, Popover, and Switch, which are dependencies for the DateRangePicker component.

```bash
npx shadcn-ui@latest add button calendar label popover switch
```

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

### DateRangePicker Component Props Reference

Source: https://github.com/johnpolacek/date-range-picker-for-shadcn/blob/main/README.md

This section details the available properties for the DateRangePicker component, including their types, default values, and descriptions. It covers callback functions, initial date settings, alignment options, locale, and the visibility of the compare feature.

```APIDOC
Props:
- onUpdate:
    Type: function
    Default: -
    Description: Callback function that is called when the date range is updated. The function receives an object containing the selected date range and, if the compare feature is enabled, the compare date range.
- initialDateFrom:
    Type: Date or string
    Default: Today’s Date
    Description: The initial start date for the main date range.
- initialDateTo:
    Type: Date or string
    Default: -
    Description: The initial end date for the main date range.
- initialCompareFrom:
    Type: Date or string
    Default: -
    Description: The initial start date for the compare date range.
- initialCompareTo:
    Type: Date or string
    Default: -
    Description: The initial end date for the compare date range.
- align:
    Type: string
    Default: 'end'
    Description: The alignment of the dropdown popover. Options are 'start', 'center', or 'end'.
- locale:
    Type: string
    Default: 'en-US'
    Description: The locale used for date formatting.
- showCompare:
    Type: boolean
    Default: true
    Description: Whether to show the compare date range feature.
```

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