Nav link states

Active, hover, and current indicators for primary navigation.

Preview

States

DefaultNav item

HoverNav item

ActiveNav item

Usage

// Default
className="rounded-lg px-4 py-2 text-sm
  font-medium text-zinc-400
  transition-colors
  hover:bg-[#8B5CF6]/10
  hover:text-[#8B5CF6]"

// Active
className="rounded-lg px-4 py-2 text-sm
  font-medium text-[#8B5CF6]
  bg-[#8B5CF6]/15
  ring-1 ring-[#8B5CF6]/40"