# Hover Gradient NavBar

> ChatGPT said:  This MenuBar component is a modern, animated bottom navigation bar built with React, Tailwind CSS, Framer Motion, and Lucide icons. It stays fixed at the bottom of the screen, adapts its width to fit the menu items, and features a subtle 3D flip animation with glow effects on hover. With rounded corners, a glassmorphic blurred background, and smooth transitions, it provides a sleek, floating dock-style navigation experience.

- 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/hover-gradient-nav-bar

## Install

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