open-index/open-npm huggingface dataset:
npm package: @nikhilaggala/react-navbar
Description: ![npm](https://img.shields.io/npm/v/@nikhilaggala/react-navbar?style=flat-square) ![npm downloads](https://img.shields.io/npm/dm/@nikhilaggala/react-navbar?style=flat-square)
Latest version: 1.1.1

# 🧭 Simple React Navbar Component

![npm](https://img.shields.io/npm/v/@nikhilaggala/react-navbar?style=flat-square)
![npm downloads](https://img.shields.io/npm/dm/@nikhilaggala/react-navbar?style=flat-square)

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

## 📸 Demo

![Navbar Demo](./demo/assets/Screenshot 2025-05-02 at 1.58.50 PM.png)

## ✨ 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

```bash
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
npm package: @nikhildhawan/loginpage
Latest version: 1.0.3

# Loginlib



This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.2.

To use this, below are inputs you can use:
Import the Lib Module in you application module using : LoginlibModule
to use this in your component <lib-loginlib></lib-loginlib>

websiteName : string => Name to be shown on the login page
disableSignup : boolean  => to show sign up switch button
primaryColor : main background color Default is #60c6f1
secondaryColor : secondary color used for login container background color  Default is #ffde59

you will get the details when user click login/signup button as an event you can listen to it using property (loginDetails)
the details will be in format 
{'loginMode':this.activity,'userName':this.username,'password':this.password}

Using this you can validate the details by yourself, the basic validation is put in place it will not send details when the inputs are blank.

More features on the way

## Code scaffolding

Run `ng generate component component-name --project loginlib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project loginlib`.
> Note: Don't forget to add `--project loginlib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build loginlib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build loginlib`, go to the dist folder `cd dist/loginlib` and run `npm publish`.

## Running unit tests

Run `ng test loginlib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.