Tubelight Navbar

A sleek and modern navigation bar component with smooth animations and a dynamic indicator. Perfect for primary navigation in web applications. Features - Animated tab indicator with glowing effect - Responsive design (mobile & desktop views) - Icons for mobile view, text for desktop - Dark/Light theme support - Frosted glass effect for active state - Smooth transitions between tabs - Built with Framer Motion for fluid animations

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tubelight Navbar to your project and fits it to your theme.

import { Home, User, Briefcase, FileText } from 'lucide-react'
import { NavBar } from "@/components/ui/tubelight-navbar"

export function NavBarDemo() {
  const navItems = [
    { name: 'Home', url: '#', icon: Home },
    { name: 'About', url: '#', icon: User },
    { name: 'Projects', url: '#', icon: Briefcase },
    { name: 'Resume', url: '#', icon: FileText }
  ]

  return <NavBar items={navItems} />
}