Lumevia UI

Premium, accessible UI components and complete project sections for HTML, CSS, and Vanilla JavaScript—with an optional Tailwind Premium collection.

Created and maintained by Shubham Panghal.

Install

The package is ready for npm publication as lumevia-ui. Until it is published from an authenticated npm account, install the generated tarball or local folder:

npm install ./lumevia-ui-0.1.0.tgz

After publication, the public command becomes:

npm install lumevia-ui

Vanilla setup

Import the complete stylesheet:

@import "lumevia-ui/styles";

Initialize accessible interactions:

import { initLumevia, toast, applyTheme, getThemes } from "lumevia-ui";

initLumevia();
toast("Your project is ready", { title: "Created", tone: "success" });
applyTheme("ocean");
console.log(getThemes());

Without a bundler, copy styles/lumevia.css and scripts/lumevia.js into your project and use:

<link rel="stylesheet" href="./assets/css/lumevia.css">
<script type="module">
  import { initLumevia } from "./assets/js/lumevia.js";
  initLumevia();
</script>

What is included

Lumevia contains 24 reusable component and section groups:

• Layout: container, grid, stack, cluster.
• Core UI: buttons, badges, cards, form fields.
• Interactive UI: tabs, accordion, dropdown, dialog, toast, theme picker, responsive navbar.
• Premium sections: hero, logo cloud, About, feature bento, stats, testimonial, pricing, CTA, footer.

The vl- prefix means visual layer and keeps component styles isolated from application CSS.

Seven themes

Available themes are linen, dark, forest, ocean, ember, orchid, and graphite.

import { applyTheme } from "lumevia-ui";
applyTheme("ember");

Or set a theme without JavaScript:

<html data-theme="forest">

The theme picker markup is demonstrated in starter.html. Selected themes persist in localStorage.

Premium project sections

Open starter.html for a complete page composed from reusable contracts:

• Premium Navbar
• Premium Hero
• Premium Logo Cloud
• Premium About
• Premium Feature Bento
• Premium Stats
• Premium Testimonial
• Premium Pricing
• Premium CTA
• Premium Footer

Every section intentionally includes Premium in its showcase label so the standard and elevated collections remain easy to distinguish.

Premium Tailwind collection

Tailwind is optional and never required for the Vanilla library.

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "lumevia-ui/tailwind-premium";

Copy production-ready markup from tailwind/premium-components.html. The initial collection includes:

• Premium Navbar — Editorial
• Premium Hero — Signal
• Premium About — Manifesto
• Premium CTA — Statement
• Premium Footer — Studio

Tailwind CSS 3.4 or newer is an optional peer dependency.

Dynamic content

Initialize only the subtree you injected. The initializer prevents duplicate listeners:

const region = document.querySelector("#dynamic-region");
region.innerHTML = componentMarkup;
initLumevia(region);

Local showcase

python -m http.server 8080

Then open:

• http://localhost:8080/index.html for core components.
• http://localhost:8080/starter.html for premium project sections and all themes.

Publish to npm

Package-name availability was checked on August 5, 2026. Availability can change until the first successful publish.

npm login
npm publish --access public

Publishing requires your own npm account and should be done only after updating the author, repository, support, and homepage metadata in package.json.

License

MIT