# DockMorph

> This DockMorph component is a modern, customizable navigation bar inspired by macOS but redesigned with a futuristic, morphic-glass aesthetic. It stays fixed to the screen — at the bottom, top, or left — even while scrolling, ensuring constant accessibility. Each icon is interactive, with smooth scaling and a morphic glass bubble that expands behind the hovered item, creating an organic, fluid effect. Tooltips provide quick context, and the design automatically adapts to both dark and light themes using Tailwind’s utility classes. Its versatility makes it suitable for dashboards, productivity apps, or creative websites where you want a unique, always-visible navigation experience that feels sleek, interactive, and visually engaging.

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

## Install

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