🧭 Simple React Navbar Component

A fully responsive, mobile-friendly navbar React component — easily customizable with icons and colors.

📸 Demo


✨ Features

• 📱 Mobile responsive with hamburger menu
• 🎨 Customizable background and text colors
• ✅ Works with any icons (Lucide, FontAwesome, etc.)
• 🪶 Lightweight and easy to integrate

📚 Tech Stack & Architecture

🧱 Tech Used

• React 19 – Core library for building the Navbar UI component.
• TypeScript – Provides strong typing for component props and internal logic.
• Vite – Lightning-fast dev server and build tool for local development.
• Tsup – Bundler used to generate both CommonJS (.js) and ESM (.mjs) builds with TypeScript declaration files (.d.ts).
• CSS – Component styling is handled with a clean, responsive CSS file.
• Icons Support – Fully compatible with Lucide, FontAwesome, or any ReactNode icons.

🏗️ Build & Publish Process

1. Project Setup:

   • Used Vite for local development (vite).
   • Component resides in src/components/Navbar.tsx.

2. Bundling with Tsup:

   • tsup generates:
     • dist/index.js (CommonJS)
     • dist/index.mjs (ESM)
     • dist/index.d.ts (Type declarations)

3. Package Publishing:

   • Package name: @nikhilaggala/react-navbar
   • Published to npm via npm publish --access public.
   • package.json contains proper main, module, types, and exports fields for compatibility.

🚀 Installation

npm install @nikhilaggala/react-navbar

Usage

import { Navbar } from "@nikhilaggala/react-navbar";
import { Home, Settings } from "lucide-react"; // or any icon lib

const App = () => {
  return (
    <Navbar
      navItems={[
        { label: "Home", icon: <Home /> },
        { label: "Settings", icon: <Settings /> },
      ]}
      backgroundColor="#333"
      textColor="#fff"
    />
  );
};

Props

| Prop | Type | Default | Description | |------------------|-----------------------------|---------|----------------------------------------| | navItems | Array of { label, icon } | — | Items to show in the navbar | | backgroundColor| string | #333 | Navbar background | | textColor | string | white | Text and icon color |

Author

Built for demo by Nikhil Aggala