@primus-saas/react

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

Installation

npm install @primus-saas/react

Quick Start

import { PrimusProvider, PrimusLogin } from '@primus-saas/react';

function App() {
  return (
    <PrimusProvider authority="https://your-auth.com" clientId="your-client-id">
      <PrimusLogin allowSocial />
    </PrimusProvider>
  );
}

Components

Platform

| Component | Description | |-----------|-------------| | <PrimusLogin /> | Universal login form with social providers | | <UserProfile /> | User profile display with avatar | | <NotificationFeed /> | Real-time notification list | | <CheckoutForm /> | Payment checkout with card input | | <DocumentViewer /> | Universal document viewer (PDF, images) |

Banking

| Component | Description | |-----------|-------------| | <CreditCardVisual /> | 3D credit card display | | <TransactionHistory /> | Transaction list with filters |

Insurance

| Component | Description | |-----------|-------------| | <PolicyCard /> | Insurance policy summary | | <ClaimStatusTracker /> | Claim progress tracker |

Props Reference

PrimusLogin

| Prop | Type | Description | |------|------|-------------| | allowSocial | boolean | Enable Google/GitHub login | | onSuccess | (user) => void | Login success callback |

CreditCardVisual

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

CheckoutForm

| Prop | Type | Description | |------|------|-------------| | amount | number | Charge amount (required) | | onSubmit | () => Promise<void> | Submit handler |

PolicyCard

| Prop | Type | Description | |------|------|-------------| | policyNumber | string | Policy ID | | type | string | Auto, Home, Life, etc. | | status | 'active' \| 'pending' \| 'expired' | Status | | coverageAmount | number | Coverage limit | | premiumAmount | number | Monthly cost |

License

MIT © Primus SaaS Framework