Overview

Primus UI

Primus UI is a collection of React and Angular components designed to work with the Primus SaaS Platform backend modules. The Angular package includes many of the same suites as React; component parity may vary by release.

React quickstart Angular quickstart UI Components CLI setup

Start here

Package

React

Install primus-react-ui and import components.

Get started

Package

Angular

Install primus-angular-ui and import modules/components.

Get started

CLI

Source Copy

Use primus-ui to copy components into your app.

Run init

Reference

Component Catalog

Browse all Primus UI React and Angular components.

Browse components

Base Layer

Primus SaaS UI Components

Zero-dependency semantic HTML/CSS design system. Works in React, Angular, and plain HTML.

View reference →

Requirements

Requirements

Angular 21.x (primus-angular-ui)
Angular 16-20 (primus-angular-ui-legacy)
RxJS 7.x or 8.x

Key Features

CLI

Source-first option

The CLI copies component source into your app (no runtime dependency).

Design System

Primus SaaS UI Components

~35KB zero-dependency CSS base layer. Styles semantic HTML in React, Angular, and plain HTML identically.

TypeScript

Full type safety and IntelliSense.

Access

Accessible

Built with accessibility best practices.

Defaults and conventions

SDK defaults are configured for local development.
Set apiUrl (and any explicit endpoint inputs) to your own backend in production.
pollInterval defaults to 3000 ms (3 seconds) for notification polling.

Installation

Option A: React package

npm install primus-react-ui

Option B: Angular package

npm install primus-angular-ui

Need Angular 16-20? Install primus-angular-ui-legacy instead.

Option C: CLI (source copy)

Run the initialization command in your project root:

npx primus-ui init

This will create a primus.json configuration file and set up the src/components/ui directory.

Add Components

Use the add command to install a component:

npx primus-ui add <component-name>

Use in Your App (CLI output)

import { PrimusLogin } from "@/components/ui/primus-login";

export default function Page() {
  return <PrimusLogin />;
}

Or import from the package

import { PrimusLogin } from "primus-react-ui";

export default function LoginPage() {
  return <PrimusLogin showEmailLogin socialProviders={["azure", "auth0", "google"]} />;
}

Angular example

import { PrimusUiModule } from "primus-angular-ui";

@NgModule({
  imports: [
    PrimusUiModule.forRoot({
      apiBaseUrl: "https://api.yourdomain.com"
    })
  ]
})
export class AppModule {}

Angular component usage (one by one)

Notification Center

<primus-notification-center
  [apiUrl]="'https://api.yourdomain.com'"
  theme="dark"
  [pollInterval]="3000"
></primus-notification-center>

Notification Feed

<primus-notification-feed
  [apiUrl]="'https://api.yourdomain.com'"
  [pollInterval]="3000"
  [userId]="'user-123'"
></primus-notification-feed>

Checkout Form

<primus-checkout-form
  [amount]="499"
  currency="USD"
  [apiUrl]="'https://api.yourdomain.com'"
  (onSuccess)="handlePayment($event)"
  (onError)="handlePaymentError($event)"
></primus-checkout-form>

Security Dashboard

<primus-security-dashboard
  [apiUrl]="'https://api.yourdomain.com'"
></primus-security-dashboard>

Document Viewer (Document Mode)

<primus-document-viewer
  [document]="doc"
  (onClose)="closeViewer()"
  (onDownload)="downloadDoc()"
></primus-document-viewer>

File Uploader

<primus-file-uploader
  [apiUrl]="'https://api.yourdomain.com'"
  (onUploadComplete)="onFileUploaded($event)"
></primus-file-uploader>

AI Copilot

<primus-ai-copilot
  title="AI Copilot"
  placeholder="Ask me anything..."
  mode="complete"
  [apiUrl]="'https://api.yourdomain.com'"
  (responded)="handleAi($event)"
></primus-ai-copilot>

<primus-login
  title="Welcome Back"
  subtitle="Enter your credentials"
  [showEmailLogin]="true"
  [socialProviders]="['google','github']"
  authEndpoint="/api/auth"
  theme="light"
  [useService]="true"
  (onLogin)="onLogin($event)"
  (onSocialLogin)="onSocial($event)"
></primus-login>

User Profile

<primus-user-profile
  [user]="currentUser"
  [showLogout]="true"
  [useService]="true"
  (loggedOut)="onLoggedOut()"
></primus-user-profile>

Data Table

<primus-data-table
  [columns]="columns"
  [data]="rows"
  [selectable]="true"
  (onRowClick)="onRowClick($event)"
  (onSelectionChange)="onSelection($event)"
></primus-data-table>

<primus-modal
  [open]="isOpen"
  title="Confirm Action"
  size="md"
  (onClose)="isOpen = false"
>
  Modal content goes here.
  <div modal-footer>
    <button>Confirm</button>
  </div>
</primus-modal>

Dashboard

<primus-dashboard
  title="Overview"
  subtitle="Key metrics"
></primus-dashboard>

Dashboard Grid

<primus-dashboard-grid [columns]="3">
  <!-- dashboard cards here -->
</primus-dashboard-grid>

<primus-header
  [title]="'Primus Admin'"
  [breadcrumbs]="breadcrumbs"
  [user]="currentUser"
  (onUserClick)="onUserClick()"
></primus-header>

<primus-sidebar
  [items]="navItems"
  [activeId]="activeNavId"
  (onItemClick)="onNavClick($event)"
></primus-sidebar>

Layout

<primus-layout [sidebar]="true" [header]="true" [darkMode]="false">
  <!-- app content -->
</primus-layout>

Transaction History

<primus-transaction-history
  [transactions]="transactions"
  (onTransactionClick)="onTransactionClick($event)"
></primus-transaction-history>

Feature Flag Toggle

<primus-feature-flag-toggle
  flagKey="beta-dashboard"
  [apiUrl]="'https://api.yourdomain.com'"
  (toggled)="onFlagToggled($event)"
></primus-feature-flag-toggle>

KYC Verification

<primus-kyc-verification
  userId="user-123"
  [apiUrl]="'https://api.yourdomain.com'"
></primus-kyc-verification>

Credit Card

<primus-credit-card
  cardHolder="Jane Doe"
  last4="4242"
  expiry="12/26"
  brand="visa"
  variant="platinum"
></primus-credit-card>

Account Dashboard

<primus-account-dashboard
  [apiUrl]="'https://api.yourdomain.com'"
></primus-account-dashboard>

Credit Score Card

<primus-credit-score-card
  userId="user-123"
  [apiUrl]="'https://api.yourdomain.com'"
></primus-credit-score-card>

Loan Calculator

<primus-loan-calculator
  [apiUrl]="'https://api.yourdomain.com'"
></primus-loan-calculator>

Log Viewer

<primus-log-viewer></primus-log-viewer>

Fraud Detection Dashboard

<primus-fraud-detection-dashboard
  [riskScore]="32"
  [alerts]="fraudAlerts"
></primus-fraud-detection-dashboard>

Claim Status Tracker

<primus-claim-status-tracker
  claimId="CLM-1024"
  status="In Review"
  [steps]="claimSteps"
></primus-claim-status-tracker>

Claim Tracker

<primus-claim-tracker
  claimId="CLM-2048"
  status="Submitted"
  [steps]="claimSteps"
></primus-claim-tracker>

Policy Card

<primus-policy-card></primus-policy-card>

Premium Calculator

<primus-premium-calculator title="Premium Calculator"></primus-premium-calculator>

Quote Comparison

<primus-quote-comparison
  [quotes]="quotes"
></primus-quote-comparison>

Agent Directory

<primus-agent-directory
  [agents]="agents"
></primus-agent-directory>

Button

<primus-button>Primary</primus-button>

Input

<primus-input label="Email" placeholder="name@example.com"></primus-input>

Form Field

<primus-form-field label="Company">
  <input type="text" />
</primus-form-field>

Textarea

<primus-textarea label="Notes" placeholder="Enter notes"></primus-textarea>

Select

<primus-select label="Plan" [options]="planOptions"></primus-select>

Radio Group

<primus-radio-group label="Billing" [options]="billingOptions"></primus-radio-group>

Toggle

<primus-toggle label="Enable alerts" [checked]="true"></primus-toggle>

Date Picker

<primus-date-picker label="Start date"></primus-date-picker>

Stats Card

<primus-stats-card label="Monthly Revenue" [value]="'$142k'" delta="+12%" trend="up"></primus-stats-card>

Theme Toggle

<primus-theme-toggle></primus-theme-toggle>

Stepper

<primus-stepper
  [steps]="steps"
  [activeStep]="1"
  [completedSteps]="[0]"
  (stepSelected)="onStepSelected($event)"
></primus-stepper>

Wizard

<primus-wizard title="Leave Request" subtitle="Step 1 of 3">
  <div wizard-steps>
    <primus-stepper
      [steps]="steps"
      [activeStep]="1"
      [completedSteps]="[0]"
    ></primus-stepper>
  </div>
  <div wizard-content>
    <!-- step content -->
  </div>
  <div wizard-actions>
    <primus-wizard-nav
      (back)="onBack()"
      (next)="onNext()"
    ></primus-wizard-nav>
  </div>
</primus-wizard>

Wizard Nav

<primus-wizard-nav
  backLabel="Back"
  nextLabel="Next"
  (back)="onBack()"
  (next)="onNext()"
></primus-wizard-nav>

Summary Card

<primus-summary-card title="Total Users" subtitle="Last 30 days">
  <div>24,910</div>
</primus-summary-card>

Section

<primus-section title="Settings">
  Section content here.
</primus-section>

Available Suites

Suite	Description	Components
Core & Auth	Primary UI building blocks	Login, User Profile, Notifications
Banking	FinTech components	Account Dashboard, Transaction History, Credit Card, KYC Verification, Loan Calculator, Credit Score
Insurance	InsurTech components	Claim Tracker, Claim Status Tracker, Policy Card, Quote Comparison, Premium Calculator, Fraud Detection, Agent Directory
Payments	Billing and checkout	Checkout Form
Admin & Ops	Admin utilities	Data Table, Stats Card, Feature Flags
Observability	Monitoring and logs	Log Viewer
Storage	File workflows	File Uploader
AI	Assistive workflows	AI Copilot
Documents	Document rendering	Document Viewer

Primus SaaS UI Components

@primus/ui-core is the zero-dependency base layer that powers all component styling. It provides design tokens, semantic HTML element styles, and Web Components (<primus-tabs>, <primus-dropdown>, toast API) that work in React, Angular, and plain HTML.

Add it once and all your HTML elements inherit the Primus purple brand palette automatically:

npm install @primus/ui-core

Full reference →

Primus UI

Start here​

React

Angular

Source Copy

Component Catalog

Primus SaaS UI Components

Requirements​

Key Features​

Source-first option

Primus SaaS UI Components

TypeScript

Accessible

Defaults and conventions​

Installation​

Option A: React package​

Option B: Angular package​

Option C: CLI (source copy)​

Add Components​

Use in Your App (CLI output)​

Or import from the package​

Angular example​

Angular component usage (one by one)​

Notification Center​

Notification Feed​

Checkout Form​

Security Dashboard​

Document Viewer (Document Mode)​

File Uploader​

AI Copilot​

Login​

User Profile​

Data Table​

Modal​

Dashboard​

Dashboard Grid​

Header​

Sidebar​

Layout​

Transaction History​

Feature Flag Toggle​

KYC Verification​

Credit Card​

Account Dashboard​

Credit Score Card​

Loan Calculator​

Log Viewer​

Fraud Detection Dashboard​

Claim Status Tracker​

Claim Tracker​

Policy Card​

Premium Calculator​

Quote Comparison​

Agent Directory​

Button​

Input​

Form Field​

Textarea​

Select​

Radio Group​

Toggle​

Date Picker​

Stats Card​

Theme Toggle​

Stepper​

Wizard​

Wizard Nav​

Summary Card​

Section​

Available Suites​

Start here

Requirements

Key Features

Defaults and conventions

Installation

Option A: React package

Option B: Angular package

Option C: CLI (source copy)

Add Components

Use in Your App (CLI output)

Or import from the package

Angular example

Angular component usage (one by one)

Notification Center

Notification Feed

Checkout Form

Security Dashboard

Document Viewer (Document Mode)

File Uploader

AI Copilot

Login

User Profile

Data Table

Modal

Dashboard

Dashboard Grid

Header

Sidebar

Layout

Transaction History

Feature Flag Toggle

KYC Verification

Credit Card

Account Dashboard

Credit Score Card

Loan Calculator

Log Viewer

Fraud Detection Dashboard

Claim Status Tracker

Claim Tracker

Policy Card

Premium Calculator

Quote Comparison

Agent Directory

Button

Input

Form Field

Textarea

Select

Radio Group

Toggle

Date Picker

Stats Card

Theme Toggle

Stepper

Wizard

Wizard Nav

Summary Card

Section

Available Suites