# CalendarLume

> The CalendarLume component is a modern, three-level date picker that allows users to navigate seamlessly from years to months and then down to individual days. Unlike a standard calendar, it begins with a scrollable year grid ranging from 1900 to 2100, letting users quickly select a year. Once a year is chosen, the component transitions smoothly into a month grid, and selecting a month reveals the familiar day calendar. Breadcrumb-style buttons for Year and Month are positioned in the header, making it easy to jump directly between levels without needing back navigation. With a clean layout, subtle animations, and intuitive flow, CalendarLume offers a clear and user-friendly way to explore dates across large ranges of time.

- 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, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/calendar-lume

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/calendar-lume?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