# Glow Menu

> Glow Menu component Animated 3D Menu Bar with Theme Toggle  This component is a modern interactive navigation menu built using Next.js, Framer Motion, and Next Themes. It combines smooth 3D animations, gradient glows, and a dynamic light/dark theme toggle for a visually engaging user experience.  ⚙️ Key Features:  Theme Toggle Switch  Allows users to switch between light and dark modes.  Smooth animated transitions for the Sun and Moon icons.  Built using next-themes and a custom Switch component for elegant state handling.  Animated 3D Navigation Menu  Each menu item (Home, Notifications, Settings, Profile) has a flip animation powered by Framer Motion.  Items animate with a 3D rotation effect when hovered, flipping between front and back labels.  A soft radial glow appears on hover, matching the item’s color theme (blue, orange, green, red).  Dynamic Gradient Glow  The menu bar features a subtle hover-based background glow, adapting to the current theme.  The glow uses a radial gradient effect for a premium, futuristic look.  Responsive & Themed Design  The component uses Tailwind CSS for styling.  Automatically adjusts colors, text, and glow intensity depending on the theme (light or dark).  The design remains minimal and clean while highlighting motion effects.  🧩 Tech Stack:  React + Next.js  Framer Motion for animations  next-themes for theme management  Tailwind CSS for styling  Lucide Icons for vector icons  🖼️ Component Structure:  ThemeToggle – Handles light/dark theme switching with animated icons.  MenuBar – Displays a navigation bar with motion-based hover effects.  Page – Wraps everything in a ThemeProvider and centers the UI on the screen.  🎬 Animation Highlights:  Flip animation using rotateX transitions for 3D depth.  Spring-based motion for natural responsiveness.  Hover glows and perspective transforms for a glassy UI feel.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: next-themes, lucide-react, framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/glow-menu

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/glow-menu?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