primus-react-ui

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

Installation

npm install primus-react-ui

Quick Start

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

function App() {
  return (
    <PrimusProvider authority="https://your-api.com" clientId="your-client-id">
      <PrimusLogin
        socialProviders={['google', 'github']}
        onLogin={({ username, password }) => {
          console.log(username, password);
        }}
        onSocialLogin={(provider) => {
          console.log('Social login:', provider);
        }}
      />
    </PrimusProvider>
  );
}

Components

Core & Auth

• PrimusProvider
• PrimusLogin
• UserProfile
• NotificationFeed
• PrimusNotificationCenter
• PrimusThemeProvider
• PrimusThemeToggle

Layout & Dashboard

• PrimusLayout
• PrimusSidebar
• PrimusHeader
• PrimusDashboard
• DashboardGrid
• PrimusStatCard

Data

• PrimusDataTable
• PrimusModal

Banking

• AccountDashboard
• CreditCardVisual
• TransactionHistory
• CreditScoreCard
• KYCVerification
• LoanCalculator

Insurance

• PolicyCard
• ClaimStatusTracker
• QuoteComparison
• AgentDirectory
• FraudDetectionDashboard
• PremiumCalculator

Payments

• CheckoutForm

Documents

• DocumentViewer

Security, Ops, and Storage

• SecurityDashboard
• FeatureFlagToggle
• LogViewer
• FileUploader

AI

• AICopilot

Hooks

• usePrimusAuth
• useNotifications
• useRealtimeNotifications
• usePrimusTheme

Props Reference

PrimusLogin

| 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 |

CheckoutForm

| 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 |

CreditCardVisual

| 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 |

PolicyCard

| 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 |

DocumentViewer

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

License

MIT - Primus SaaS Framework