Components
Loading preview...
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
@ayushmxxn
npx shadcn@latest add https://21st.dev/r/ayushmxxn/tubelight-navbarimport { 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} />
}