Limelight Nav

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

UniqueUI CLI

npx uniqueui add limelight-nav

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/limelight-nav.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Default

Variant 1 of 2

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>
  );
}

Custom

Variant 2 of 2

import { LimelightNav } from "@/components/ui/limelight-nav";
import { Home, Bookmark, PlusCircle, User, Settings } 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="#06b6d4"
        className="bg-neutral-900/50"
        items={[
          { id: '1', icon: <Home />, label: 'Home' },
          { id: '2', icon: <Bookmark />, label: 'Bookmarks' },
          { id: '3', icon: <PlusCircle />, label: 'Add' },
          { id: '4', icon: <User />, label: 'Profile' },
          { id: '5', icon: <Settings />, label: 'Settings' }
        ]}
      />
    </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.