Components
Anime Navbar
The AnimeNavBar is a responsive, animated navigation bar built with React, Framer Motion, and Tailwind CSS. It supports hover effects, active state highlighting, and animations for both desktop and mobile views, creating an engaging and visually appealing user experience.
"use client"
import * as React from "react" // Import React
import { Home, FileText, CreditCard, Info } from "lucide-react"
import { AnimeNavBar } from "@/components/ui/anime-navbar"
const items = [
{
name: "Home",
url: "#",
href: "#",
icon: Home,
},
{
name: "Convert",
url: "#",
href: "#",
icon: FileText,
},
{
name: "Pricing",
url: "#",
href: "#",
icon: CreditCard,
},
{
name: "About",
url: "#",
href: "#",
icon: Info,
},
]
export function AnimeNavBarDemo() {
return <AnimeNavBar items={items} defaultActive="Home" />
}