Back to Components
PreviousNext

Glowing Desktop Nav

A modern navigation component with animated pill indicator, accent-aware gradients, and glow effects.

Examples

Custom Nav Items and Accent Color

Installation

$ npx shadcn@latest add https://akshitr.com/r/glowing-nav.json

Usage

import { GlowingNav } from "@/components/glowing-nav";
 
export default function GlowingNavDemo() {
  return (
    <div className="flex items-center justify-center">
      <GlowingNav />
    </div>
  );
}

Component API

PropTypeDefaultDescription
items?NavItem[]DEFAULT_ITEMSArray of navigation items with label and href.
defaultActive?string—Label of the initially active item.
accent?string"white"Any valid CSS color value for the glow and pill tint.
className?string—Additional classes applied to the <nav> wrapper.
onNavigate?(item: NavItem) => void—Callback fired when an item is selected.