Limelight Nav

Adaptive fluid navigation bar with a limelight spotlight and spring-animated tabs.

npx uniqueui add limelight-nav

Preview

Usage

import { LimelightNav } from "@/components/ui/limelight-nav";
import { Home, Compass, Bell } from "lucide-react";

export default function Example() {
  return (
    <div className="flex items-center justify-center p-12 h-[300px] w-full bg-neutral-950 rounded-xl border border-neutral-800">
      <LimelightNav 
        limelightColor="#a855f7"
        items={[
          { id: '1', icon: <Home />, label: 'Home' },
          { id: '2', icon: <Compass />, label: 'Explore' },
          { id: '3', icon: <Bell />, label: 'Notifications' }
        ]}
      />
    </div>
  );
}

Props

Prop	Type	Description
`items`	`NavItem[]`	Array of navigation items containing id, icon, label, and onClick.
`defaultActiveIndex`	`number`	Initial active tab index.
`limelightColor`	`string`	The CSS color passed inline to define the spotlight glow.
`className`	`string`	Styles applied to the container.