# Tilted Dock

> This 3D Tilted Dock with Depth Layers is a futuristic UI component that makes a simple dock feel alive and immersive. The dock sits on a slightly tilted glass-like stage, creating the illusion of depth. Each icon responds dynamically: when hovered, it floats closer with a smooth tilt, while inactive icons gently fade into the background. A subtle parallax effect makes the entire dock shift in response to mouse movement, giving it a cinematic and interactive feel. Designed with a morphic glass background, it adapts seamlessly to both dark and light themes, while labels appear elegantly without breaking the layout. This unique combination of tilt, depth, and parallax transforms the dock into a visually striking and engaging centerpiece for modern web interfaces.

- 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/tilted-dock

## Install

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