primus-react-ui

Premium React UI components for building modern SaaS applications with the Primus Framework.

Installation

``bash
npm install primus-react-ui
`

Quick Start

`tsx
import { PrimusProvider, PrimusLogin } from 'primus-react-ui';

function App() {
return (

socialProviders={['google', 'github']}
onLogin={({ username, password }) => {
console.log(username, password);
}}
/>

);
}
`

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

Identity Broker note: social provider login is redirect-based (GET /api/auth/{provider}).



Components

$3

- PrimusProvider
- PrimusLogin
- UserProfile
- NotificationFeed
- PrimusNotificationCenter
- PrimusThemeProvider
- PrimusThemeToggle

$3

- PrimusLayout
- PrimusSidebar
- PrimusHeader
- PrimusDashboard
- DashboardGrid
- PrimusStatCard

$3

- PrimusDataTable
- PrimusModal

$3

- AccountDashboard
- CreditCardVisual
- TransactionHistory
- CreditScoreCard
- KYCVerification
- LoanCalculator

$3

- PolicyCard
- ClaimStatusTracker
- QuoteComparison
- AgentDirectory
- FraudDetectionDashboard
- PremiumCalculator

$3

- CheckoutForm

$3

- DocumentViewer

$3

- SecurityDashboard
- FeatureFlagToggle
- LogViewer
- FileUploader

$3

- AICopilot

Hooks

- usePrimusAuth
- useNotifications
- useRealtimeNotifications
- usePrimusTheme

Props Reference

$3

| Prop | Type | Description |
|------|------|-------------|
| onLogin | (credentials: { username: string; password: string }) => void | Email/password submit handler |
| socialProviders | SocialProvider[] | Social providers to display |
| onSocialLogin | (provider: SocialProvider) => void | Social login handler |
| authEndpoint | string | Base path for social auth redirects |
| showEmailLogin | boolean | Show email/password form |
| title | string | Form title |
| subtitle | string | Form subtitle |
| logo | ReactNode \| string | Logo element or URL |
| theme | 'light' \| 'dark' | Theme override |

$3

| Prop | Type | Description |
|------|------|-------------|
| authority | string | API base URL (origin only) |
| authBasePath | string | Broker base path (default: /api/auth) |
| csrfCookieName | string | CSRF cookie name (default: XSRF-TOKEN) |
| csrfHeaderName | string | CSRF header name (default: X-Primus-CSRF) |
| seedCsrfOnLoad | boolean | Seed CSRF cookie on load (default: true) |

$3

| Prop | Type | Description |
|------|------|-------------|
| amount | number | Charge amount (required) |
| currency | string | Currency code |
| apiUrl | string | Base API URL |
| onSuccess | (result: any) => void | Payment success callback |
| onError | (error: string) => void | Payment error callback |

$3

| Prop | Type | Description |
|------|------|-------------|
| cardHolder | string | Name on card |
| last4 | string | Last 4 digits |
| expiry | string | MM/YY format |
| variant | 'black' \| 'blue' \| 'gold' \| 'platinum' | Card theme |
| brand | 'visa' \| 'mastercard' \| 'amex' | Card network |

$3

| Prop | Type | Description |
|------|------|-------------|
| policyNumber | string | Policy ID |
| type | string | Policy type |
| status | 'active' \| 'expired' \| 'pending' | Policy status |
| coverageAmount | number | Coverage limit |
| premiumAmount | number | Monthly premium |
| nextPaymentDate | string | Next payment date |

$3

| Prop | Type | Description |
|------|------|-------------|
| document | Document | Document metadata |
| onClose | () => void | Close handler |
| onDownload | () => void` | Download handler |

License

MIT - Primus SaaS Framework