🌐 Live Demo

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

Virtual UI

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

📦 Install

npm install virtual-ui-lib

🚀 Usage

import {
  Navbar,
  Sidebar,
  AvatarCard,
  PricingCard,
  Loader,
  OTPInput
} from "virtual-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