# Constellation Dock

> This Constellation Dock component is a futuristic, interactive navigation element designed to resemble a dynamic network or constellation map. Each icon is connected to the others via thin, animated lines that form a “web” of connections. When a user hovers over an icon, the hovered icon and all its connecting lines light up, creating an engaging visual focus. The component can be positioned at the bottom, top, or left side of the screen and remains fixed while scrolling, ensuring constant accessibility. It supports both dark and light themes, with morphic-glass style icons that blend seamlessly with any background. This dock transforms standard navigation into a visually rich, interactive experience, perfect for dashboards, creative apps, or futuristic interfaces.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: clsx, lucide-react, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/constellation-dock

## Install

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