# Day Picker
URL: /docs/web/components/day-picker

Day Picker component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { DayPicker } from '@docyrus/ui/components/day-picker';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { cn } from '@docyrus/ui/primitives/lib/utils';

export function DayPickerDemo() {
  type Variant = 'default' | 'outline' | 'ghost';
  const [variant, setVariant] = useState
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Size</span>
                
                  
                    
                    
                  
                
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-day-picker
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [react-day-picker](https://www.npmjs.com/package/react-day-picker)

## Usage

```tsx
import {
  DayPicker
} from "@docyrus/ui/components/day-picker";

```

## Variants

| Variant | Description |
|---------|-------------|
| `default` | Default style |
| `outline` | Outline — `border border-border rounded-xl` |
| `ghost` | Ghost — `bg-transparent` |

## Sizes

| Size | Description |
|------|-------------|
| `default` | Default — `[--cell-size:36px] text-sm` |
| `sm` | Small — `[--cell-size:28px] p-2 text-xs` |
| `lg` | Large — `[--cell-size:44px] p-4 text-base` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `variant` | `"default"` \| `"outline"` \| `"ghost"` | `"default"` |
| `size` | `"default"` \| `"sm"` \| `"lg"` | `"default"` |
| `showOutsideDays` | `boolean` | `true` |
| `fixedWeeks` | `boolean` | — |
| `numberOfMonths` | `number` | — |
| `captionLayout` | `'label' \| 'dropdown' \| 'dropdown-months' \| 'dropdown-years'` | — |
| `className` | `string` | — |