@infotrust/ui

@infotrust/ui

InfoTrust's Vue 3 + PrimeVue 4 component library, built on @infotrust/design-tokens. It is the standard UI for the InfoTrust Suite, its modules, Tag Inspector, and new InfoTrust apps.

Built for InfoTrust products. This package is public so InfoTrust's own apps and build systems can install it without credentials. It is not a general-purpose library and has no support for outside use. It changes when InfoTrust's products need it to, and a release (minor ones included, while it is 0.x) can change or remove anything without notice. Use it at your own risk under the MIT License.

Install

pnpm add @infotrust/ui @infotrust/design-tokens "primevue@^4.5.0" "@primeuix/themes@^2.0.3" lucide-vue-next

No registry setup and no token: it installs from the public npm registry.

Peers: vue ^3.5.0, primevue >=4.5.0 <5, @primeuix/themes ^2.0.3, lucide-vue-next >=0.400.0, and optionally vue-router ^4.0.0. The DAG canvas (@infotrust/ui/dag) also needs @vue-flow/core ^1.48.0 and elkjs ^0.12.0.

Use

import '@infotrust/ui/styles.css'; // fonts, tokens, base, and component CSS, in cascade layers
import { createInfotrustUI, initItTheme } from '@infotrust/ui';

initItTheme(); // before mount: applies the saved light/system/dark preference
createApp(App).use(createInfotrustUI()).mount('#app');

styles.css declares the layer order it-tokens, it-base, primevue, it-components, it-overrides, and createInfotrustUI() puts PrimeVue's runtime theme in the primevue layer. App CSS is unlayered and always wins, so overrides never need !important. @infotrust/ui/components.css is the component CSS alone, for apps that load the tokens another way.

Render <ItOverlayHost /> once in the root component (toasts and confirmations).

<ItPage title="Monitor">
  <template #meta><ItStatus status="succeeded" :label="`Last scan ${formatFreshness(lastScan)}`" /></template>
  <template #actions><Button label="Run scan" @click="run" /></template>

  <ItPanel padding="none">
    <template #toolbar>
      <ItDataToolbar v-model:search="q" :count="rows.length" noun="findings" />
    </template>
    <ItDataTable :value="rows" :loading="loading" data-key="id">
      <Column field="score" header="Severity"><template #body="{ data }"><ItSeverityBadge :severity="data.score" /></template></Column>
      <Column field="title" header="Finding" body-class="it-cell-primary" />
    </ItDataTable>
  </ItPanel>
</ItPage>

Component choice, APIs, and page patterns are in the infotrust-ui Claude Code plugin.

License and notices

MIT, Copyright (c) 2026 InfoTrust, LLC. The brand logos that ItPlatformLogo draws are trademarks of their owners and are not covered by the MIT License. The package bundles third-party code under its own licenses (elkjs, highlight.js, vue-sonner, and Vue Flow's base styles). Both are listed in NOTICE.md, and the license texts are in dist/licenses/.

Security problems: email ryan.bulcher@infotrustllc.com. Do not open a public issue.