Components Library

For CLI component availability, run npx primus-ui list in your project.

Package Components (React)

Component	Import	Notes
AICopilot	`import { AICopilot } from "primus-react-ui"`	AI assistant panel.
PrimusLogin	`import { PrimusLogin } from "primus-react-ui"`	Auth form with social providers.
UserProfile	`import { UserProfile } from "primus-react-ui"`	User profile card.
Primus Auth	`import { PrimusProvider, usePrimusAuth } from "primus-react-ui"`	Auth provider + hook. See `frontend/components/authentication/primus-auth`.
PrimusNotificationCenter	`import { PrimusNotificationCenter } from "primus-react-ui"`	Notification bell + panel.
NotificationFeed	`import { NotificationFeed } from "primus-react-ui"`	Simple notification popover.
SecurityDashboard	`import { SecurityDashboard } from "primus-react-ui"`	Security findings list.
PrimusRbacAdmin	`import { PrimusRbacAdmin } from "primus-react-ui"`	RBAC admin console.
DocumentViewer	`import { DocumentViewer } from "primus-react-ui"`	Document preview panel.
CheckoutForm	`import { CheckoutForm } from "primus-react-ui"`	Card checkout form.
FileUploader	`import { FileUploader } from "primus-react-ui"`	Drag and drop upload.
FeatureFlagToggle	`import { FeatureFlagToggle } from "primus-react-ui"`	Feature flag control.
PrimusDataTable	`import { PrimusDataTable } from "primus-react-ui"`	Sortable table.
PrimusModal	`import { PrimusModal } from "primus-react-ui"`	Modal dialog.
PrimusDashboard	`import { PrimusDashboard } from "primus-react-ui"`	Dashboard layout.
DashboardGrid	`import { DashboardGrid } from "primus-react-ui"`	Dashboard grid layout.
PrimusStatCard	`import { PrimusStatCard } from "primus-react-ui"`	Stats card.
PrimusActivityFeed	`import { PrimusActivityFeed } from "primus-react-ui"`	Activity timeline.
PrimusFilterBar	`import { PrimusFilterBar } from "primus-react-ui"`	Dashboard filter bar.
PrimusExportMenu	`import { PrimusExportMenu } from "primus-react-ui"`	Export menu.
PrimusSearch	`import { PrimusSearch } from "primus-react-ui"`	Debounced search input.
PrimusDateRangePicker	`import { PrimusDateRangePicker } from "primus-react-ui"`	Date range picker.
PrimusLineChart	`import { PrimusLineChart } from "primus-react-ui"`	Line chart (Chart.js).
PrimusAreaChart	`import { PrimusAreaChart } from "primus-react-ui"`	Area chart (Chart.js).
PrimusBarChart	`import { PrimusBarChart } from "primus-react-ui"`	Bar chart (Chart.js).
PrimusPieChart	`import { PrimusPieChart } from "primus-react-ui"`	Pie chart (Chart.js).
PrimusSparkline	`import { PrimusSparkline } from "primus-react-ui"`	Sparkline chart.
PrimusHeader	`import { PrimusHeader } from "primus-react-ui"`	Header bar.
PrimusSidebar	`import { PrimusSidebar } from "primus-react-ui"`	Sidebar navigation.
PrimusLayout	`import { PrimusLayout } from "primus-react-ui"`	App layout shell.
TransactionHistory	`import { TransactionHistory } from "primus-react-ui"`	Transactions list.
AccountDashboard	`import { AccountDashboard } from "primus-react-ui"`	Account overview.
CreditScoreCard	`import { CreditScoreCard } from "primus-react-ui"`	Credit score summary.
LoanCalculator	`import { LoanCalculator } from "primus-react-ui"`	Loan calculator.
KYCVerification	`import { KYCVerification } from "primus-react-ui"`	KYC status panel.
CreditCardVisual	`import { CreditCardVisual } from "primus-react-ui"`	Card visual.
QuoteComparison	`import { QuoteComparison } from "primus-react-ui"`	Insurance quote compare.
PremiumCalculator	`import { PremiumCalculator } from "primus-react-ui"`	Premium estimator.
PolicyCard	`import { PolicyCard } from "primus-react-ui"`	Policy card.
ClaimStatusTracker	`import { ClaimStatusTracker } from "primus-react-ui"`	Claim status timeline.
FraudDetectionDashboard	`import { FraudDetectionDashboard } from "primus-react-ui"`	Fraud insights.
AgentDirectory	`import { AgentDirectory } from "primus-react-ui"`	Agent list.
LogViewer	`import { LogViewer } from "primus-react-ui"`	Log list.
Button	`import { Button } from "primus-react-ui"`	Shared button.
Input	`import { Input } from "primus-react-ui"`	Shared input.

Package Components (Angular)

Component	Selector	Notes
Account Card	`<primus-account-card>`	Banking card.
Account Dashboard	`<primus-account-dashboard>`	Account overview.
Agent Directory	`<primus-agent-directory>`	Agent list.
AI Copilot	`<primus-ai-copilot>`	AI assistant panel.
Button	`<primus-button>`	UI button.
Checkout Form	`<primus-checkout-form>`	Card checkout form.
Claim Status Tracker	`<primus-claim-status-tracker>`	Claim status timeline.
Claim Tracker	`<primus-claim-tracker>`	Claim tracker view.
Credit Card	`<primus-credit-card>`	Card visual.
Credit Score Card	`<primus-credit-score-card>`	Credit score summary.
Dashboard	`<primus-dashboard>`	Dashboard layout.
Dashboard Grid	`<primus-dashboard-grid>`	Grid layout.
Grid Item	`<primus-grid-item>`	Grid span wrapper.
Activity Feed	`<primus-activity-feed>`	Activity timeline.
Filter Bar	`<primus-filter-bar>`	Dashboard filter bar.
Export Menu	`<primus-export-menu>`	Export menu.
Line Chart	`<primus-line-chart>`	Line chart (Chart.js).
Area Chart	`<primus-area-chart>`	Area chart (Chart.js).
Bar Chart	`<primus-bar-chart>`	Bar chart (Chart.js).
Pie Chart	`<primus-pie-chart>`	Pie chart (Chart.js).
Sparkline	`<primus-sparkline>`	Sparkline chart.
Data Table	`<primus-data-table>`	Sortable table.
Date Picker	`<primus-date-picker>`	Date input.
Date Range Picker	`<primus-date-range-picker>`	Date range input.
Document Viewer	`<primus-document-viewer>`	Document preview.
Feature Flag Toggle	`<primus-feature-flag-toggle>`	Feature flag control.
File Uploader	`<primus-file-uploader>`	Drag and drop upload.
Form Field	`<primus-form-field>`	Field wrapper.
Fraud Detection Dashboard	`<primus-fraud-detection-dashboard>`	Fraud insights.
Header	`<primus-header>`	Header bar.
Input	`<primus-input>`	Form input.
KYC Verification	`<primus-kyc-verification>`	KYC status.
Layout	`<primus-layout>`	App layout shell.
Loan Calculator	`<primus-loan-calculator>`	Loan calculator.
Log Viewer	`<primus-log-viewer>`	Log list.
Login	`<primus-login>`	Auth form.
Primus Auth	`-`	Auth services: `PrimusAuthService`, `PrimusAuthStateService`. See `frontend/components/authentication/primus-auth`.
Modal	`<primus-modal>`	Modal dialog.
Notification Center	`<primus-notification-center>`	Notification bell + panel.
Notification Feed	`<primus-notification-feed>`	Notification popover.
Policy Card	`<primus-policy-card>`	Policy card.
Premium Calculator	`<primus-premium-calculator>`	Premium estimator.
Quote Comparison	`<primus-quote-comparison>`	Quote compare.
Radio Group	`<primus-radio-group>`	Radio options.
RBAC Admin	`<primus-rbac-admin>`	RBAC admin console.
Section	`<primus-section>`	Section container.
Security Dashboard	`<primus-security-dashboard>`	Security findings.
Security Scan Panel	`<primus-security-scan-panel>`	Scan panel.
Select	`<primus-select>`	Select input.
Search	`<primus-search>`	Debounced search input.
Sidebar	`<primus-sidebar>`	Sidebar nav.
Stats Card	`<primus-stats-card>`	Metric card.
Step	`<primus-step>`	Stepper step.
Stepper	`<primus-stepper>`	Stepper UI.
Summary Card	`<primus-summary-card>`	Summary metric.
Textarea	`<primus-textarea>`	Textarea input.
Theme Toggle	`<primus-theme-toggle>`	Theme switch.
Toggle	`<primus-toggle>`	Toggle switch.
Transaction History	`<primus-transaction-history>`	Transactions list.
User Profile	`<primus-user-profile>`	User profile card.
Wizard	`<primus-wizard>`	Wizard container.
Wizard Nav	`<primus-wizard-nav>`	Wizard navigation.

RBAC UI

The RBAC admin console is a reusable UI for managing roles, permissions, groups, memberships, assignments, and access checks.

React

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

export default function RbacAdminPage() {
  return (
    <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"
    />
  );
}

Angular

<primus-rbac-admin
  [apiUrl]="'https://api.yourdomain.com'"
  [withCredentials]="true"
  title="RBAC Admin"
  subtitle="Roles, permissions, teams, and access checks">
</primus-rbac-admin>

Notes

withCredentials enables cookie-based auth and CSRF headers for the Primus BFF. Use this if your backend uses secure cookies.
authToken can be a string or function returning a bearer token for secured APIs.
defaultScope pre-fills application and tenant IDs for multi-tenant setups.
showHero toggles the split hero layout that matches the Primus Authentication look.
apiUrl should be the origin of your backend (without /api).
The RBAC API surface is documented in the RBAC integration guide: /docs/modules/rbac/integration-guide.

Usage Examples

Installing a component

npx primus-ui add <component-name>

Using the component (React package)

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

export default function Dashboard() {
  return <AccountDashboard apiUrl="https://api.yourdomain.com" />;
}

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 →

Component Library

Package Components (React)​

Package Components (Angular)​

RBAC UI​

React​

Angular​

Notes​

Usage Examples​

Installing a component​

Using the component (React package)​