🌐 Live Demo

👉 https://vector-ui-client.onrender.com

---

Vector UI

A modern and customizable React UI Component Library designed for fast development and clean design systems.

---

📦 Install

npm i @adityagupta1112004/vector-ui-lib

---

🚀 Usage

import {
  Navbar,
  Sidebar,
  AvatarCard,
  PricingCard,
  Loader,
  OTPInput
} from "vector-ui-lib"

function App() {
  return (
    <>
      <Navbar />
      <Sidebar />

      <div style={{ padding: "20px" }}>
        <AvatarCard />
        <PricingCard />
        <OTPInput />
        <Loader />
      </div>
    </>
  )
}

---

🧩 Components

Virtual UI includes the following components:

• AvatarCard
• BackgroundImageSlider
• Charts
• ColorPicker
• FileUpload
• Footer
• ImageCard
• ImageSlider
• InvoiceCard
• Loader
• Navbar
• NotificationToast
• OTPInput
• PageLoader
• PricingCard
• RatingStars
• Sidebar

---

📘 Component Details

---

AvatarCard

<AvatarCard />

Props

Prop	Description
name	User name
image	Avatar image
role	User role
size	Card size

---

Navbar

<Navbar />

Props

Prop	Description
logo	Logo text/image
links	Navigation links
fixed	Sticky navbar

---

Sidebar

<Sidebar />

Props

Prop	Description
items	Sidebar items
collapsed	Collapse state

---

PricingCard

<PricingCard />

Props

Prop	Description
title	Plan name
price	Plan price
features	List of features
highlighted	Highlight plan

---

OTPInput

<OTPInput length={6} />

Props

Prop	Description
length	Number of digits
onChange	OTP change handler

---

Loader

<Loader />

Props

Prop	Description
size	Loader size
color	Loader color

---

NotificationToast

<NotificationToast message="Saved!" />

Props

Prop	Description
message	Toast text
type	success / error / info

---

Charts

<Charts />

Props

Prop	Description
type	bar / line / pie
data	Chart data

---

ColorPicker

<ColorPicker />

Props

Prop	Description
value	Selected color
onChange	Change handler

---

FileUpload

<FileUpload />

Props

Prop	Description
onUpload	Upload handler
multiple	Allow multiple files

---

ImageCard

<ImageCard />

Props

Prop	Description
src	Image source
title	Image title

---

ImageSlider

<ImageSlider />

Props

Prop	Description
images	Image array
autoPlay	Auto slide

---

BackgroundImageSlider

<BackgroundImageSlider />

Props

Prop	Description
images	Background images
overlay	Overlay color

---

InvoiceCard

<InvoiceCard />

Props

Prop	Description
invoiceId	Invoice ID
amount	Amount
status	Paid / Pending

---

RatingStars

<RatingStars rating={4} />

Props

Prop	Description
rating	Number of stars
onChange	Change handler

---

PageLoader

<PageLoader />

Props

Prop	Description
fullScreen	Full page loader

---

Footer

<Footer />

Props

Prop	Description
text	Footer text
links	Footer links

---

🤝 Contributing

Contributions are welcome!

• Fork the repo
• Create a new branch
• Submit a pull request

---

📄 License

MIT License

---

💡 Future Improvements

• Theme system (dark/light mode)
• Animation presets
• Accessibility improvements
• More enterprise components

---

Made with ❤️ for developers