Components
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.
npx shadcn@latest add https://21st.dev/r/jatin-yadav05/anime-navbarLoading preview...
"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" />
}