Dashboard

General purpose dashboard shell for stats, charts, and content areas.

Preview · Dashboard

Code

HTML · @primus/ui-core

<div style="width:100%">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
    <div>
      <h2 style="margin:0;font-size:1.1rem">Operations Overview</h2>
      <p style="margin:0;font-size:0.8rem;color:var(--muted-foreground)">Last 30 days</p>
    </div>
    <button class="outline small">Export</button>
  </div>
  <div class="hstack" style="flex-wrap:wrap">
    <div class="card stat" style="flex:1;min-width:120px"><span class="card-label">MRR</span><span class="card-value">$98k</span><span class="card-delta up">+4%</span></div>
    <div class="card stat" style="flex:1;min-width:120px"><span class="card-label">Users</span><span class="card-value">12.4k</span><span class="card-delta up">+12%</span></div>
    <div class="card stat" style="flex:1;min-width:120px"><span class="card-label">Churn</span><span class="card-value">2.1%</span><span class="card-delta down">improving</span></div>
  </div>
</div>

React

import { PrimusDashboard, DashboardGrid, PrimusStatCard } from 'primus-react-ui';

<PrimusDashboard title="Operations Overview" subtitle="Last 30 days">
  <DashboardGrid columns={3}>
    <PrimusStatCard title="MRR"   value="$98k"  change={{ value: 4,  type: 'increase' }} />
    <PrimusStatCard title="Users" value="12.4k" change={{ value: 12, type: 'increase' }} />
    <PrimusStatCard title="Churn" value="2.1%"  change={{ value: 3,  type: 'decrease' }} />
  </DashboardGrid>
</PrimusDashboard>

Angular

<primus-dashboard title="Operations Overview" subtitle="Last 30 days">
  <div dashboard-content>
    <primus-dashboard-grid [columns]="3">
      <primus-stats-card label="MRR"   [value]="'$98k'"  delta="+4%"  trend="up"></primus-stats-card>
      <primus-stats-card label="Users" [value]="'12.4k'" delta="+12%" trend="up"></primus-stats-card>
      <primus-stats-card label="Churn" [value]="'2.1%'"  delta="-3%"  trend="down"></primus-stats-card>
    </primus-dashboard-grid>
  </div>
</primus-dashboard>

Props

Prop	Type	Default	Description
title	string	—	Dashboard title
subtitle	string	—	Supporting subtitle

Version history

See the Changelog for version history and breaking changes.