React

Primus UI for React

Primus UI React package usage.

OverviewComponent listProps catalog

Install the React package:

npm install primus-react-ui

Basic usage

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

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

Broker auth wiring (recommended for SPAs)

import { PrimusProvider, PrimusLogin, usePrimusAuth } from "primus-react-ui";

function App() {
  return (
    <PrimusProvider authority="https://api.yourdomain.com" authBasePath="/api/auth" clientId="my-app">
      <LoginPage />
    </PrimusProvider>
  );
}

function LoginPage() {
  const { login } = usePrimusAuth();
  return (
    <PrimusLogin
      showEmailLogin
      socialProviders={["azure", "auth0", "google"]}
      onLogin={({ username, password }) => login({ email: username, password })}
    />
  );
}

If your backend exposes /auth/* instead of /api/auth/*, set authBasePath="/auth" and authEndpoint="/auth".

React component usage (one by one)

AI Copilot

<AICopilot apiUrl="https://api.yourdomain.com" />

Login

<PrimusLogin showEmailLogin socialProviders={["azure", "auth0", "google"]} />

User Profile

<UserProfile />

Notification Center

<PrimusNotificationCenter apiUrl="https://api.yourdomain.com" />

Notification Feed

<NotificationFeed />

Security Dashboard

<SecurityDashboard apiUrl="https://api.yourdomain.com" />

RBAC Admin

<PrimusRbacAdmin
  apiUrl="https://api.yourdomain.com"
  authToken={() => localStorage.getItem("access_token")}
  defaultScope={{ applicationId: "app-core", tenantId: "tenant-001" }}
  withCredentials
  title="RBAC Admin"
  subtitle="Roles, permissions, teams, and access checks"
/>

The RBAC Admin UI expects the RBAC endpoints described in the backend integration guide: /docs/modules/rbac/integration-guide.

Document Viewer

<DocumentViewer
  document={{ id: "doc-1", name: "Invoice", type: "pdf", url: "/sample.pdf" }}
  onDownload={() => {}}
/>

Checkout Form

<CheckoutForm amount={499} currency="USD" apiUrl="https://api.yourdomain.com" />

File Uploader

<FileUploader apiUrl="https://api.yourdomain.com" onUploadComplete={() => {}} />

Feature Flag Toggle

<FeatureFlagToggle apiUrl="https://api.yourdomain.com" />

Data Table

<PrimusDataTable columns={columns} data={rows} />

Modal

<PrimusModal open={isOpen} title="Confirm" onClose={() => setIsOpen(false)}>
  Modal content
</PrimusModal>

Dashboard

<PrimusDashboard title="Overview" subtitle="Key metrics" />

Activity Feed

<PrimusActivityFeed items={activityItems} />

Filter Bar

<PrimusFilterBar filters={filters} activeFilters={activeFilters} onChange={setFilters} />

Export Menu

<PrimusExportMenu formats={['CSV', 'PDF']} onExport={(payload) => console.log(payload)} />

Charts

<PrimusLineChart labels={labels} series={series} height={320} />

Date Range Picker

<PrimusDateRangePicker ranges={['Today', 'Last 7 days']} onRangeChange={(range) => console.log(range)} />

Search

<PrimusSearch placeholder="Search users" onSearch={(value) => console.log(value)} />

Header

<PrimusHeader title="Primus Admin" breadcrumbs={breadcrumbs} user={currentUser} />

Sidebar

<PrimusSidebar items={navItems} activeId={activeId} />

Layout

<PrimusLayout sidebar={<PrimusSidebar items={navItems} />} header={<PrimusHeader title="Primus" />}>
  App content
</PrimusLayout>

Transaction History

<TransactionHistory transactions={transactions} />

Account Dashboard

<AccountDashboard apiUrl="https://api.yourdomain.com" />

Credit Score Card

<CreditScoreCard userId="user-123" apiUrl="https://api.yourdomain.com" />

Loan Calculator

<LoanCalculator apiUrl="https://api.yourdomain.com" />

KYC Verification

<KYCVerification userId="user-123" apiUrl="https://api.yourdomain.com" />

Credit Card Visual

<CreditCardVisual cardHolder="Jane Doe" last4="4242" expiry="12/26" brand="visa" />

Quote Comparison

<QuoteComparison apiUrl="https://api.yourdomain.com" />

Premium Calculator

<PremiumCalculator apiUrl="https://api.yourdomain.com" />

Policy Card

<PolicyCard
  policyNumber="POL-123"
  coverageAmount={250000}
  premiumAmount={120}
  status="Active"
  type="Auto"
/>

Claim Status Tracker

<ClaimStatusTracker
  claimId="CLM-123"
  steps={[
    { id: "submitted", label: "Submitted", status: "completed" },
    { id: "review", label: "Review", status: "current" },
    { id: "approved", label: "Approved", status: "upcoming" }
  ]}
/>

Fraud Detection Dashboard

<FraudDetectionDashboard apiUrl="https://api.yourdomain.com" />

Agent Directory

<AgentDirectory apiUrl="https://api.yourdomain.com" />

Log Viewer

<LogViewer />

Button

<Button>Primary</Button>

Input

<Input label="Email" placeholder="name@example.com" />

Props reference (all components)

React props reference

AICopilot

Prop	Description
apiUrl	Base API URL for network calls.

AccountDashboard

Prop	Description
apiUrl	Base API URL for network calls.

AgentDirectory

Prop	Description
apiUrl	Base API URL for network calls.

Button

No custom props. Inherits standard element props if applicable.

CheckoutForm

Prop	Description
amount	Amount value.
apiUrl	Base API URL for network calls.
currency	Currency code.
onError	Emits error string.
onSuccess	Emits success response.

ClaimStatusTracker

Prop	Description
claimId	Claim identifier.
steps	Step definitions.

CreditCardVisual

Prop	Description
brand	Brand name.
cardHolder	Cardholder name.
expiry	Expiry date.
last4	Last four digits.
variant	Style variant.

CreditScoreCard

Prop	Description
userId	User identifier.

DocumentViewer

Prop	Description
document	Document payload to preview.
onClose	Emits when closed.
onDownload	Emits when download requested.

FeatureFlagToggle

Prop	Description
apiUrl	Base API URL for network calls.

FileUploader

Prop	Description
apiUrl	Base API URL for network calls.

FraudDetectionDashboard

Prop	Description
apiUrl	Base API URL for network calls.

Input

No custom props. Inherits standard element props if applicable.

KYCVerification

Prop	Description
userId	User identifier.

LoanCalculator

Prop	Description
apiUrl	Base API URL for network calls.

LogViewer

Prop	Description
apiUrl	Base API URL for network calls.

NotificationFeed

No custom props. Inherits standard element props if applicable.

PolicyCard

Prop	Description
coverageAmount	Coverage amount.
nextPaymentDate	Next payment date.
policyNumber	Policy number.
premiumAmount	Premium amount.
status	Status value.
type	Type or category.

PremiumCalculator

Prop	Description
apiUrl	Base API URL for network calls.

PrimusDashboard

Prop	Description
actions	Action slot content.
children	Dashboard content.
subtitle	Secondary heading text.
title	Primary heading text.

DashboardGrid

Prop	Description
children	Grid content.
columns	Column count (1-4).

PrimusStatCard

Prop	Description
title	Card title.
value	Value text.
change	Change badge configuration.
icon	Leading icon.
description	Supporting text.
trend	Sparkline data values.

PrimusDataTable

Prop	Description
actions	Action items or configuration.
columns	Column configuration.
data	Data payload.
emptyMessage	Empty state text.
loading	Loading state.
onRowClick	Emits row data on click.
onSelectionChange	Emits selected keys.
rowKey	Unique key field for rows.
searchPlaceholder	Search input placeholder.
searchable	Enable search box.
selectable	Enable row selection.
selectedKeys	Selected row keys.
paginated	Enable client-side pagination.
pageSize	Page size when paginated.
pageIndex	Controlled page index.
onPageChange	Emits page changes.

PrimusHeader

Prop	Description
actions	Action items or configuration.
avatar	Avatar URL.
breadcrumbs	Breadcrumb items.
email	Email address.
name	Form field name.
onUserClick	Custom property.
title	Primary heading text.
user	User info.

PrimusLayout

Prop	Description
children	Children content.
darkMode	Enable dark mode.
header	Header content or toggle.
sidebar	Sidebar content or toggle.

PrimusLogin

Prop	Description
authEndpoint	Auth base endpoint.
logo	Logo URL.
onLogin	Emits login payload.
onSocialLogin	Emits provider selection.
showEmailLogin	Show email/password form.
socialProviders	Enabled social providers.
subtitle	Secondary heading text.
theme	Theme override.
title	Primary heading text.

PrimusModal

Prop	Description
children	Children content.
footer	Footer content.
onClose	Emits when closed.
open	Open state.
size	Size variant.
title	Primary heading text.

PrimusNotificationCenter

Prop	Description
apiUrl	Base API URL for network calls.
theme	Theme override.
pollInterval	Polling interval in ms.
mockData	Mock notification list.
useMock	Toggle mock mode.

PrimusRbacAdmin

Prop	Description
apiUrl	Base API URL (origin only).
authToken	Bearer token or resolver.
headers	Extra headers for requests.
withCredentials	Include cookies + CSRF header for BFF auth.
endpoints	Override RBAC endpoints.
defaultScope	Pre-fill scope fields.
defaultPrincipalType	Default principal type (e.g., user).
defaultGroupType	Default group type (e.g., team).
showScopeFields	Toggle scope fields.
title	Primary heading text.
subtitle	Secondary heading text.
showHero	Show the left hero panel (default: true).
heroBadge	Hero badge label.
heroTitle	Hero headline text.
heroSubtitle	Hero supporting text.
heroItems	Hero bullet list items.

PrimusActivityFeed

Prop	Description
items	Activity items.
maxItems	Maximum items to display.
showTimestamps	Toggle timestamp labels.
groupByDate	Group items by date.
loading	Loading state.

PrimusFilterBar

Prop	Description
filters	Filter configuration list.
activeFilters	Current filter values.
onChange	Emits filter changes.
children	Optional actions or extra content.

PrimusExportMenu

Prop	Description
formats	Export format list.
includeCharts	Include charts toggle.
includeStats	Include stats toggle.
includeTables	Include tables toggle.
onExport	Emits export payload.

PrimusSearch

Prop	Description
placeholder	Placeholder text.
debounce	Debounce delay in ms.
value	Controlled value.
showSuggestions	Toggle suggestions list.
suggestions	Suggestion list.
onSearch	Emits search query.

PrimusDateRangePicker

Prop	Description
startDate	Start date value.
endDate	End date value.
ranges	Preset ranges.
min	Minimum date.
max	Maximum date.
disabled	Disable inputs.
onRangeChange	Emits range changes.

PrimusLineChart / PrimusAreaChart / PrimusBarChart / PrimusPieChart / PrimusSparkline

Prop	Description
labels	X-axis labels.
series	Series list.
data	Chart.js data object override.
options	Chart.js options override.
height	Chart height in px.
width	Chart width in px.
legend	Toggle legend.
responsive	Responsive sizing.
maintainAspectRatio	Keep aspect ratio.
ariaLabel	Accessible label.

PrimusSidebar

Prop	Description
activeId	Active navigation id.
footer	Footer content.
items	Navigation items (supports href, route, target).
logo	Logo URL.
onItemClick	Custom property.

QuoteComparison

Prop	Description
apiUrl	Base API URL for network calls.

SecurityDashboard

Prop	Description
apiUrl	Base API URL for network calls.

TransactionHistory

Prop	Description
onTransactionClick	Emits selected transaction id.
transactions	Transaction list.

UserProfile

No custom props. Inherits standard element props if applicable.

Notes:

• React Button and Input extend native element attributes; use standard props as needed.
• Props listed here are inferred from component definitions.

Notes:

• React Button and Input extend native element attributes; use standard props as needed.
• Props listed here are inferred from component definitions.

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 →