Metric Cards

Use Metric Cards to show a row of headline numbers: revenue, cost, margin, margin percent, and any custom metrics you define. Part of Usage Widgets.

Preview
Code

<MetricCards
  metrics={[
    { id: 'revenue', titleKey: 'revenue', value: 12500, currency: 'USD' },
    { id: 'cost', titleKey: 'cost', value: 4200, currency: 'USD' },
  ]}
/>

Supports

Revenue, cost, margin, and margin percent cards
Custom metrics (any name and value you pass in)
Currency formatting per card
Percent formatting
Change indicators (up / down)
Loading skeleton state

Best used for

Usage dashboards
Customer portal overview
Account summary pages

Import

import '@flexprice/ui/style.css';
import { MetricCards, type MetricCardItem } from '@flexprice/ui';

Usage

const metrics: MetricCardItem[] = [
  { id: 'revenue', titleKey: 'revenue', value: 12500, currency: 'USD' },
  { id: 'cost', titleKey: 'cost', value: 4200, currency: 'USD' },
  { id: 'margin', titleKey: 'margin', value: 8300, currency: 'USD', showChangeIndicator: true },
  { id: 'margin-percent', titleKey: 'marginPercent', value: 66.4, isPercent: true, showChangeIndicator: true },
];

<MetricCards metrics={metrics} />

titleKey is one of revenue, cost, margin, marginPercent, cpm, or custom. For custom, also pass customLabel with the display name. See Ways to provide data for SDK, API, backend, and static JSON options.

Map Flexprice API data

import { adaptMetricCards } from '@flexprice/ui';

const metrics = adaptMetricCards(costAnalytics, customAnalytics, {
  show_revenue_metric: true,
  show_cost_metrics: true,
  show_custom_metrics: true,
});

Usage Widgets

Overview of all four usage components.

Usage Trend Chart

Line chart of usage over time, one series per feature.

Usage Breakdown

Grouped, sortable table of usage and cost by feature.

⌘I

Introduction

Getting Started

Connect

Event Ingestion

Product Catalogue

Scenarios

Customers

Checkout

Subscriptions

Wallet

Invoices

Webhooks

Settings

Collectors

Data Exports

RBAC

Cookbooks

AI Cost Tracking

Contributing Guide

Exportable UI

Supports

Best used for

Import

Usage

Map Flexprice API data

See also

Usage Widgets

Usage Trend Chart

Usage Breakdown

​Supports

​Best used for

​Import

​Usage

​Map Flexprice API data

​See also

Usage Widgets

Usage Trend Chart

Usage Breakdown

Supports

Best used for

Import

Usage

Map Flexprice API data

See also