Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/uniquesonu/glow-menuimport Page1 from "@/components/ui/glow-menu";
export default function DemoOne() {
return <Page1 />;
}