# Calendar Twin

> The CalendarTwin is a unique, shadcn-inspired calendar component designed for a richer date selection experience. Unlike traditional single-month calendars, it displays two consecutive months side by side, making it ideal for scenarios like travel booking or scheduling across weeks. What sets it apart is its year selection grid: instead of a simple dropdown, users can toggle into a year view that presents a 12-year block in a calendar-like layout, allowing quick jumps across years with a single click. Built with shadcn’s Button and utility classes, it keeps a consistent design language while remaining fully customizable. Developers can control the selected date via props, configure the year range, and easily integrate it into forms or dashboards. Its clean UI, flexible navigation, and intuitive design make the CalendarTwin a perfect fit for applications where both precision and speed in date selection are essential.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: date-fns, lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/calendar-twin

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/calendar-twin?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt