Credit Score Card

Not yet available

This component is planned but not yet published to the registry. The React and Angular install commands below will not work until the component ships. The HTML preview shows the intended design.

Visualises a user's credit score with gauge, rating label, and key factors.

Preview · Credit Score Card

Code

HTML · @primus/ui-core

<div class="card" style="max-width:260px;text-align:center;padding:1.5rem">
  <p style="margin:0 0 0.5rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-foreground)">Credit Score</p>
  <div style="font-size:3rem;font-weight:700;color:var(--success)">742</div>
  <span class="badge success" style="margin:0.5rem 0 0.75rem">Very Good</span>
  <progress value="74" max="100"></progress>
  <p style="margin:0.5rem 0 0;font-size:0.75rem;color:var(--muted-foreground)">Range: 300 – 850</p>
</div>

React

// Coming soon — this component is not yet available in the registry.
// Track progress: https://github.com/your-org/primus-saas/issues

Angular

<primus-credit-score-card userId="user-123"
  [apiUrl]="'https://api.yourdomain.com'">
</primus-credit-score-card>

Props

Prop	Type	Default	Description
userId	string	—	User identifier
apiUrl	string	—	API base URL

TypeScript interfaces

interface CreditScoreData {
  score:   number;   // e.g. 742
  min:     number;   // Scale minimum e.g. 300
  max:     number;   // Scale maximum e.g. 850
  rating:  'Poor' | 'Fair' | 'Good' | 'Very Good' | 'Excellent';
  factors?: { label: string; impact: 'positive' | 'negative' | 'neutral' }[];
}

Version history

See the Changelog for version history and breaking changes.