Anime Navbar

Component 505

About

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.

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

Code

How Anime Navbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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" />
}