# Calendar

> A date-field calendar for selecting single dates or ranges.

_Updated: 2026-06-04_

A date-field calendar for selecting single dates or ranges.

## Installation

```bash
railbase ui add calendar
```

> [!NOTE]
> `railbase ui add` also copies the `button` component — they ship alongside this component automatically.

## Usage

```tsx
import { Calendar } from "@/lib/ui/calendar";

const [date, setDate] = useState<Date>();

<Calendar mode="single" selected={date} onSelect={setDate} />
```