This package ships prebuilt modules for common product scenarios (commerce, booking, dashboards, messaging, education, healthcare), plus shared system UI primitives.

Package Information

Name: popsite-ui
Version: see npm release tag
License: MIT
Module type: ESM
Bundles:
- ESM: dist/popsite-ui.es.js
- CJS: dist/popsite-ui.cjs
CSS export: dist/style.css

Requirements

Peer dependencies:

react ^18.2.0 || ^19.0.0
react-dom ^18.2.0 || ^19.0.0

Installation

npm install popsite-ui react react-dom

Generate JSX Files (Simple)

If you want plain JSX files in your own folder (not used from node_modules), run:

npx popsite-ui@latest

Or if you already installed popsite-ui in your project:

npx popsite-ui-init

This creates a full starter folder named new-folder-jsx with:

App.jsx
main.jsx
index.html
package.json
vite.config.js
Header.jsx
Footer.jsx
TabNavigation.jsx
RegistrationForm.jsx
TicketBookingForm.jsx
DisplayData.jsx
TicketSummary.jsx
templateData.js
utils.js
styles.css
modules/AnalyticsDashboardModule.jsx
modules/ChatMessagingModule.jsx
modules/EcommerceStoreModule.jsx
modules/EventTicketBookingModule.jsx
modules/FlightBookingModule.jsx
modules/FoodOrderingModule.jsx
modules/HospitalAppointmentModule.jsx
modules/HotelBookingModule.jsx
modules/InvoiceBillingModule.jsx
modules/LibraryManagementModule.jsx
modules/ModuleContentDeck.jsx
modules/moduleContentMap.js
modules/moduleEnhancementsMap.js
modules/MovieBookingModule.jsx
modules/QuizExamModule.jsx
modules/StudentRegistrationModule.jsx
modules/systemModuleMap.js
modules/SystemModuleRenderer.jsx
modules/SystemModuleTemplate.jsx
modules/SystemVisualWidget.jsx

Then run:

cd new-folder-jsx
npm install
npm run dev

Optional:

npx popsite-ui-init --out my-jsx-files
npx popsite-ui-init --out my-jsx-files --force

Starter Files (Downloadable)

If you want a ready file layout like this:

App.jsx
main.jsx
index.html
package.json
vite.config.js
Header.jsx
Footer.jsx
TabNavigation.jsx
RegistrationForm.jsx
TicketBookingForm.jsx
DisplayData.jsx
TicketSummary.jsx
templateData.js
utils.js
styles.css

Install the package, then open:

node_modules/popsite-ui/starter-template/

Those files are included in npm publish output so you can copy and use them directly.

Quick Start

import React from 'react';
import { createRoot } from 'react-dom/client';
import { EcommerceStoreModule } from 'popsite-ui';
import 'popsite-ui/style.css';

function App() {
  return <EcommerceStoreModule />;
}

createRoot(document.getElementById('root')).render(<App />);

Exports

Modules

EcommerceStoreModule
MovieBookingModule
ChatMessagingModule
FlightBookingModule
AnalyticsDashboardModule
InvoiceBillingModule
FoodOrderingModule
QuizExamModule
StudentRegistrationModule
HospitalAppointmentModule
LandingPageModule
HotelBookingModule
LibraryManagementModule
EventTicketBookingModule

System Components

SystemHero
SystemSummaryCard
Toast
useToast

API Notes

SystemHero

Props:

title: string
subtitle: string
bgImage?: string
children?: React.ReactNode

SystemSummaryCard

Props:

title: string
value: React.ReactNode
icon?: React.ReactNode
trend?: number
trendLabel?: string

Toast

Props:

message: string
type?: 'success' | 'error' | 'info'
duration?: number (ms, default 3000)
onClose?: () => void

useToast

Returns:

showToast(message, type?)
ToastContainer component

Example:

import React from 'react';
import { useToast } from 'popsite-ui';

export function DemoToast() {
  const { showToast, ToastContainer } = useToast();

  return (
    <>
      <button onClick={() => showToast('Saved successfully', 'success')}>
        Show Toast
      </button>
      <ToastContainer />
    </>
  );
}

Styling

Import the packaged stylesheet once in your app entry:

import 'popsite-ui/style.css';

The design system exposes CSS variables using the --pk-* namespace (for example --pk-primary, --pk-bg-main, --pk-text-main).

Development

npm install
npm run dev

Build Library

npm run build

This runs Vite using vite.lib.config.js and outputs:

dist/popsite-ui.es.js
dist/popsite-ui.cjs
dist/style.css

Publish To npm

Ensure package name/version in package.json are correct.
Build the package:

npm run build

Inspect package contents:

npm pack --dry-run

npm login
npm publish --access public

Repository Structure

src/index.js: library entry for published exports.
src/components/modules: exported product modules.
src/components/system: exported shared system components.
src/data/systems: per-module mock datasets.
src/styles.css: shared design tokens and utility classes.
vite.lib.config.js: library build configuration.

Notes

The npm package currently exports the modules and system components listed above.
Root-level files such as App.jsx and components/* are demo/internal workspace files and are not part of the published public API from src/index.js.