Your First Component

Get from zero to a rendered Primus UI component in under 2 minutes.

1. Install

React
Angular
Plain HTML

npm install primus-react-ui @primus/ui-core

npm install primus-angular-ui @primus/ui-core

<!-- No install needed — paste this in your <head> -->
<link rel="stylesheet"
  href="https://unpkg.com/@primus/ui-core/dist/primus-ui.min.css" />

2. Import styles

React
Angular
Plain HTML

// main.tsx
import '@primus/ui-core/dist/primus-ui.min.css';
import 'primus-react-ui/styles.css';

In angular.json, add to the styles array:

"styles": [
  "node_modules/@primus/ui-core/dist/primus-ui.min.css",
  "src/styles.scss"
]

Already done in step 1 — the <link> tag loads all styles.

3. Render your first component

React
Angular
Plain HTML

// App.tsx
import { PrimusStatCard, Badge } from 'primus-react-ui';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>

      <PrimusStatCard
        title="Monthly Revenue"
        value="$98.2k"
        change={{ value: 12, type: 'increase' }}
        description="vs last month"
      />

      <PrimusStatCard
        title="Active Tenants"
        value="142"
        change={{ value: 8, type: 'increase' }}
        description="this month"
      />

      <PrimusStatCard
        title="Churn Rate"
        value="1.8%"
        change={{ value: 0.2, type: 'decrease' }}
      />

    </div>
  );
}

// app.module.ts
import { PrimusUiModule } from 'primus-angular-ui';

@NgModule({
  imports: [PrimusUiModule.forRoot({ apiBaseUrl: 'https://api.yourdomain.com' })]
})
export class AppModule {}

<!-- app.component.html -->
<div style="padding:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem">

  <primus-stats-card
    label="Monthly Revenue"
    [value]="'$98.2k'"
    delta="+12%"
    trend="up"
    description="vs last month">
  </primus-stats-card>

  <primus-stats-card
    label="Active Tenants"
    [value]="'142'"
    delta="+8"
    trend="up"
    description="this month">
  </primus-stats-card>

  <primus-stats-card
    label="Churn Rate"
    [value]="'1.8%'"
    delta="+0.2%"
    trend="down">
  </primus-stats-card>

</div>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Primus UI — Hello World</title>
  <link rel="stylesheet"
    href="https://unpkg.com/@primus/ui-core/dist/primus-ui.min.css" />
</head>
<body style="padding:2rem">

  <!-- Badge -->
  <span class="badge success">Active</span>
  <span class="badge warning">Trial</span>
  <span class="badge danger">Suspended</span>

  <!-- Stat cards -->
  <div class="row" style="margin-top:1.5rem">
    <div class="col-4">
      <div class="card stat">
        <span class="card-label">Monthly Revenue</span>
        <span class="card-value">$98.2k</span>
        <span class="card-delta up">+12% vs last month</span>
      </div>
    </div>
    <div class="col-4">
      <div class="card stat">
        <span class="card-label">Active Tenants</span>
        <span class="card-value">142</span>
        <span class="card-delta up">+8 this month</span>
      </div>
    </div>
    <div class="col-4">
      <div class="card stat">
        <span class="card-label">Churn Rate</span>
        <span class="card-value">1.8%</span>
        <span class="card-delta down">+0.2%</span>
      </div>
    </div>
  </div>

  <!-- Button variants -->
  <div class="hstack" style="gap:0.75rem;margin-top:2rem">
    <button>Primary</button>
    <button data-variant="secondary">Secondary</button>
    <button class="outline">Outline</button>
    <button data-variant="danger">Danger</button>
  </div>

</body>
</html>

What you just used

Element	What it does
`PrimusStatCard` / `primus-stats-card`	KPI card with value, delta, and trend arrow
`card stat`	`@primus/ui-core` HTML card with metric layout
`card-delta up` / `down`	Auto-coloured change indicator (green / red)
`badge success`	Coloured status badge — no JavaScript
`row` / `col-4`	12-column responsive grid
`hstack`	Horizontal flex row with automatic gap
`<button>`	Primary button — no class needed

Next steps

You have Primus UI rendering. Here is where to go next:

React setup — add PrimusThemeProvider, theme switching, auth wiring
Angular setup — standalone bootstrap, forRoot config, JS bundle
Component catalog — browse all 75+ components
Forms quick start — build a validated form
Login page cookbook — full auth page in one copy-paste

1. Install​

2. Import styles​

3. Render your first component​

What you just used​

Next steps​

1. Install

2. Import styles

3. Render your first component

What you just used

Next steps