@busiverse/ui

@busiverse/ui

Shared BUSIVERSE frontend package for separately deployed React/Vercel applications.

It contains:

• Official BUSIVERSE brand asset wrappers.
• Design tokens and Tailwind 4-compatible theme helpers.
• Global CSS, fonts, reduced-motion, focus states, glass cards, buttons, tables, forms, and app shell.
• Gateway-only API client foundation.
• OIDC/auth UI helpers for signin and user-frontend-only signup routing.
• Internationalization, country/region/currency, timezone, and locale utilities.
• CRUD and time-series-ready table components.
• Dashboard, billing, feedback, and marketing primitives.

Requirements

• Node.js >=22.12.0
• npm >=10.9.0
• React 19.2.7 compatible frontend applications

This package is ESM-only. It does not publish CommonJS output.

Tailwind 4 note

@busiverse/ui does not require PostCSS.

The package ships its own compiled/global CSS as @busiverse/ui/styles.css and exports a plain Tailwind-compatible preset object from @busiverse/ui/tailwind. Consuming applications may use Tailwind through Vite, PostCSS, or another supported integration. The UI package itself does not force @tailwindcss/postcss or @tailwindcss/vite on consumers.

Install in separately deployed Vercel frontends

Recommended production option: publish to a private npm registry package.

npm install @busiverse/ui

Local package test option:

cd packages/busiverse-ui
npm install
npm run build
npm pack
# then in each frontend
npm install ../packages/busiverse-ui/busiverse-ui-0.1.0.tgz

Add CSS once per frontend

In src/main.tsx or src/App.tsx:

import "@busiverse/ui/styles.css";

Configure env per Vercel frontend

VITE_GATEWAY_API_URL=https://api.busiversehq.com
VITE_SIGNUP_URL=https://user.busiversehq.com/signup
VITE_SERVICE_KEY=communication
VITE_DEFAULT_LOCALE=en-NG
VITE_DEFAULT_COUNTRY=NG
VITE_DEFAULT_REGION=NG-LA
VITE_DEFAULT_CURRENCY=NGN
VITE_DEFAULT_TIME_ZONE=Africa/Lagos

Use AppShell

import { AppShell, PageHeader, Button } from "@busiverse/ui";

export function Dashboard() {
  return (
    <AppShell service="communication">
      <PageHeader
        title="Communication"
        description="Send, automate, and track messages across Busiverse."
        action={<Button>New message</Button>}
      />
    </AppShell>
  );
}

Use Gateway client

import { createGatewayClient } from "@busiverse/ui";

const gateway = createGatewayClient({
  baseUrl: import.meta.env.VITE_GATEWAY_API_URL,
  getAccessToken: async () => token,
  region: {
    locale: "en-NG",
    countryCode: "NG",
    regionCode: "NG-LA",
    currencyCode: "NGN",
    timeZone: "Africa/Lagos"
  }
});

await gateway.get("/communication/api/v1/messages");

Use the Tailwind preset only when needed

If a consuming app uses Tailwind and wants Busiverse tokens:

import { busiverseTailwindPreset } from "@busiverse/ui/tailwind";

export default {
  presets: [busiverseTailwindPreset],
  content: ["./index.html", "./src/**/*.{ts,tsx}"]
};

For Busiverse Vite frontends, Tailwind itself should be configured in the frontend app, not inside this UI package.

Timeseries table

import { TimeSeriesTable } from "@busiverse/ui";

<TimeSeriesTable
  rows={metrics}
  timestampKey="createdAt"
  valueColumns={["requestCount", "p95LatencyMs", "errorRate"]}
/>

Signup rule

Only user-frontend should own real signup. Other frontends should use <SignUpLink /> and route users to https://user.busiversehq.com/signup.

Build and publish

npm install
npm run typecheck
npm run build
npm audit --audit-level=low
npm pack --dry-run
npm publish --access public

Version 0.2.0 additions

This release adds the BUSIVERSE standardized service pricing system used by busiverse-landing and reusable by every separately deployed Vercel frontend.

Added

• busiverseServicePricingCatalog with 257 Account-rated operation rows.
• ServicePricingExplorer for external pricing, internal Busiverse chargeback, estimated direct cost, margin, and standardized equivalents.
• RegionSelector and supported pricing regions.
• Country/region/currency/time-zone aware pricing display helpers.
• Time-series aware service metadata for services that surface metrics, decision history, request metering, blockchain events, model jobs, and market data.

Vercel frontend usage

Install from public npm after publishing this version:

npm install @busiverse/ui@^0.2.0

Import shared styles once in each Vite frontend entrypoint:

import "@busiverse/ui/styles.css";

Wrap the frontend with the i18n provider:

import { BusiverseI18nProvider } from "@busiverse/ui";

<BusiverseI18nProvider
  initialRegion={{
    locale: import.meta.env.VITE_DEFAULT_LOCALE ?? "en-NG",
    countryCode: import.meta.env.VITE_DEFAULT_COUNTRY ?? "NG",
    regionCode: import.meta.env.VITE_DEFAULT_REGION ?? "NG-LA",
    currencyCode: import.meta.env.VITE_DEFAULT_CURRENCY ?? "NGN",
    timeZone: import.meta.env.VITE_DEFAULT_TIME_ZONE ?? "Africa/Lagos",
  }}
>
  <App />
</BusiverseI18nProvider>

Use the standardized pricing explorer anywhere pricing must be shown:

import { ServicePricingExplorer } from "@busiverse/ui";

<ServicePricingExplorer />

The current currency conversion rates are display fallbacks only. Final production charging still belongs to Account, with Location and Mint resolving region, currency, taxes, pass-through cost, and local pricing rules.

v0.2.1 network-neutral security patch

@busiverse/ui no longer performs direct network access from inside the package. The previous createGatewayClient implementation used the browser fetch global directly, which can be flagged by npm/package scanners as “network access”. The package now requires the consuming frontend to inject a transport function.

import { createGatewayClient } from "@busiverse/ui";

export const gateway = createGatewayClient({
  baseUrl: import.meta.env.VITE_GATEWAY_API_URL,
  transport: window.fetch.bind(window),
  getAccessToken: async () => accessToken,
});

Font loading is also app-owned. The shared CSS does not import Google Fonts or any remote stylesheet. Each separately deployed Vercel frontend should self-host the BUSIVERSE fonts or load them explicitly at the app level.

v0.2.2 brand asset ownership

@busiverse/ui is now the owner of BUSIVERSE favicons, platform icons, social preview defaults, and logo assets. Consuming frontends should not duplicate BUSIVERSE favicon/logo assets in their own public/ folders unless a deployment platform explicitly requires a static file before JavaScript loads.

Use BusiverseBrandHead once near the root of each frontend to inject the shared favicons, app manifest, Open Graph metadata, Twitter card metadata, and Microsoft tile metadata from package-owned assets.

import { BusiverseBrandHead } from "@busiverse/ui";

<BusiverseBrandHead
  title="BUSIVERSE — Turn Ideas Into Operating Businesses"
  description="BUSIVERSE combines AI automation, blockchain-backed trust, and modular business services to help teams launch and operate ventures faster."
/>

The package remains network-neutral: it does not call fetch, open sockets, or import remote fonts.

v0.2.4 social icon ownership

@busiverse/ui owns BUSIVERSE-approved social icon wrappers so separately deployed frontends do not import brand icons from lucide-react. Lucide is an outline UI-icon library and newer builds do not export brand icons such as Github, Twitter, or Linkedin. Use:

import { BusiverseGithubIcon, BusiverseXIcon, BusiverseLinkedInIcon, BusiverseMailIcon } from "@busiverse/ui";

The package remains network-neutral. The icons are inline SVG React components and do not fetch remote assets.

v0.2.8 export and BusiLand marketing patch

This release fixes public subpath exports required by Vite/Rolldown:

import { BusiverseBrandHead } from "@busiverse/ui/brand";
import { BusiverseI18nProvider } from "@busiverse/ui/i18n";
import { BusiverseGithubIcon } from "@busiverse/ui/social";
import { MarketingFeatureCard } from "@busiverse/ui/marketing";

It also corrects brand asset URL paths so packaged favicon, icon, logo, and social assets resolve at build time.

Public marketing pages should not expose internal chargeback, operation codes, direct costs, margin, Account ledger mechanics, or outbox/saga details. Those remain internal/admin concerns. BusiLand should use customer-facing plans and bundles.

v0.2.9 — asset-manifest build warning fix

This release fixes Vite/Rolldown warnings caused by social asset URLs resolving against the published package root. The busiverseAssets manifest now points to dist/assets/... paths at package-consumer build time. No frontend content changes are required.

npm install @busiverse/ui@0.2.9 --save-exact

The frontend should not duplicate BUSIVERSE brand assets in public/; brand assets remain owned by @busiverse/ui.

Theme contract

@busiverse/ui@0.2.10 owns the shared BUSIVERSE light/dark CSS contract. Apps should place light or dark on document.documentElement; system mode should resolve to one of those classes. Do not hard-code className="dark ..." on page wrappers, because it prevents light mode from working.

BUSIVERSE theme contract

This frontend uses the shared BUSIVERSE theme contract from @busiverse/ui.

• Theme choices are light, dark, and system.
• The shared storage key is busiverse-theme.
• The DOM theme class is owned by next-themes through attribute="class".
• App pages must not hard-code className="dark ..." wrappers.
• vite.config.ts must keep loadEnv; do not remove it while adding build or chunking improvements.
• Existing VITE_* environment variable names must not be renamed without approval.

Theme contract

Use BusiverseThemeProvider from @busiverse/ui/theme in every separately deployed frontend. The only approved storage key is busiverse-theme, and every app must expose Light, Dark, and System through ThemeModeSelect. Do not create per-frontend theme storage keys or binary-only toggles.

Sandbox UI

@busiverse/ui/sandbox provides the shared Busiverse sandbox experience used by service frontends. It is network-neutral: it renders sandbox scenarios, dependency maps, event timelines, pricing previews, and gateway headers without making backend calls or embedding secrets.

Frontends must pass service-specific scenario content and keep API calls Gateway-only. Sandbox tokens must be issued by Authentication and enforced by Gateway; browser code must never receive client secrets.