---
title: "Calendar"
description: "A calendar component that allows picking of a single date or a range of dates."
component: true
---

<ComponentExample name="calendar-demo" />

## Usage

---

```tsx
import { Calendar } from "@medusajs/ui"
```

```tsx
<Calendar />
```

## API Reference

---

<ComponentReference mainComponent="Calendar" />

## Examples

---

### Single Date

<ComponentExample name="calendar-single" />

### Range

<ComponentExample name="calendar-range" />
