# Event Constellation Calendar

> The Event Constellation Calendar is a creative calendar component that visualizes days of the month as glowing “stars” positioned inside a constellation-like map. Each date is placed within a 400×400 canvas, ensuring all stars stay neatly inside the boundary, while connected lines form subtle constellations between consecutive days that have events. Users can navigate between months, add new events, and view or remove existing ones through an interactive popover. The design adapts to both light and dark themes, using soft backgrounds and luminous highlights to maintain readability and aesthetics. This component blends functionality with a visually engaging experience, making it ideal for projects where you want a calendar that feels more dynamic and artistic than traditional grid layouts.

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

## Install

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