📦 pandit-ji-ui

A simple and customizable React UI component library built by Abhilash Sharma.
Currently includes a Navbar component with built-in support for links, socials, and logos.

🔗 Demo

👉 Live Demo

🚀 Installation

npm install pandit-ji-ui

Usage Example

import React from "react";
import { Navbar } from "pandit-ji-ui";

const CustomNavbar = () => {
  return (
    <Navbar
      color="black"
      background="white"
      logo="https://static.vecteezy.com/system/resources/thumbnails/024/553/534/small_2x/lion-head-logo-mascot-wildlife-animal-illustration-generative-ai-png.png"
      links={[
        { label: "Home", value: "/" },
        { label: "About", value: "/about" },
        { label: "Contact", value: "/contact" },
        { label: "Other", value: "/other" },
      ]}
      socials={[
        { label: "Whatsapp", value: "https://wa.me/+918580738436" },
        {
          label: "Insta",
          value: "https://www.instagram.com/abhilashsharma1998___",
        },
        {
          label: "LinkedIn",
          value: "https://www.linkedin.com/in/webdev-abhilash-sharma",
        },
      ]}
    />
  );
};

export default CustomNavbar;

⚙️ Props

| Prop | Type | Description | | ------------ | --------- | --------------------------------------------------------------------------- | | color | string | Text color for links and social icons. Example:"white", "black" | | background | string | Background color of the navbar. Example:"white", "black" | | logo | string | URL of the logo image.Example: "https://*" | | links | array | List of navigation links. Each link is { label: string, value: string }. | | links | Example | [{label:"Home",value:"/"}, {label:"About",value:"/aobut"}] | | socials | array | List of social links. Each item is { label: string, value: string }. | | socials | Example | [{label:"Email",value:"mailto:*"},{label:"Whatsapp",value:"https://wa.me/ |