# Shadcn Range

> Range calendar

- Type: example, free and open source (MIT)
- Component: [Calendar](https://reui.io/components/calendar.md)
- Page: https://reui.io/components/calendar/c-calendar-2
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/calendar.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/calendar.md
- MCP: `get_example("c-calendar-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-calendar-2.json
- Uses: Calendar, Card

## Best for

A from and to span in one month, seeded as today through 5 days later

## When not to use

- A long span that needs 2 months in view at once: use [Two Month Range](https://reui.io/components/calendar/c-calendar-21.md) (`get_example("c-calendar-21")`)

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start)

## Install

```bash
npx shadcn@latest add @reui/c-calendar-2
```

## About Shadcn Calendar

### When to use

- Inline grids for picking one day, several separate days or a from and to range
- Date and date range fields that open the grid in a popover under a trigger button
- Booking and planning steps that pair a day with time slots, daily prices or an event list

### When not to use

- A filter over day, month, quarter or year periods with before, after and between operators: use [Date Selector](https://reui.io/components/date-selector.md) (`get_component("date-selector")`)
- A ready made booking widget with host details, duration choices and a confirm step: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)
- A month, week or day view of entries that users drag, resize and create: use [Event Calendar](https://reui.io/components/event-calendar.md) (`get_component("event-calendar")`)

### Agent notes

- `selected` takes a `Date`, a `Date` array or a `DateRange` to match `mode` single, multiple or range
- Without `required`, clicking the only selected day clears it, so `onSelect` can hand back `undefined` or an empty array

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.