Tubelight Navbar Components

Beautiful animated navigation bars with tubelight effects. Responsive design that adapts to mobile and desktop views.

Key Features

  • Smooth animated transitions with Framer Motion
  • Responsive design (text on desktop, icons on mobile)
  • Beautiful tubelight glow effect on active items
  • Backdrop blur and glassmorphism effects
  • Fixed positioning (top on desktop, bottom on mobile)

Usage Example

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

const navItems = [
  { name: 'Home', url: '#', icon: Home },
  { name: 'About', url: '#about', icon: User },
  { name: 'Projects', url: '#projects', icon: Briefcase }
]

<NavBar items={navItems} />

↑ Original navbar ↓ Alternative demo