Intentwise Primitives
Cards
Standalone KPI display blocks for dashboards and summaries. MetricCard combines a formatted value, trend badge, and optional icon into a single component.
Dashboard Grid
Four MetricCards in a responsive grid layout — the most common dashboard pattern.
Total revenue across all channels
Advertising Cost of Sales
Show code
<MetricCard data={{ title: 'Revenue', value: 708939, format: 'currency', trend: 'up', changePercent: 12.5 }} />Size Variants
Available in sm, md (default), and lg sizes for different layout densities.
sm
Total revenue across all channels
md
Total revenue across all channels
lg
Total revenue across all channels
Show code
<MetricCard data={data} size="sm" />
<MetricCard data={data} size="md" />
<MetricCard data={data} size="lg" />Without Trend
Trend badge can be hidden with showTrend={false}.
Total revenue across all channels
Show code
<MetricCard data={data} showTrend={false} />With Secondary Change
MetricCard supports a secondary comparison period (e.g., YoY alongside MoM).
Total revenue across all channels
Show code
<MetricCard data={{ ...data, secondaryChange: { value: 85000, percent: 8.2, trend: 'up', periodLabel: 'YoY' } }} />Locked / Gated State
When a metric requires additional access, set locked={true} and provide a lockedAction ({ label, href, tooltip }). The value, trend, and sparkline are hidden; the label renders as a link and the info icon shows the tooltip on hover. All three fields are dynamic — pass any message and URL from the consuming app.
Show code
<MetricCard
data={{
title: 'Total Revenue',
value: 0,
format: 'currency',
locked: true,
lockedAction: {
label: 'Provide Access',
href: 'https://help.intentwise.com',
tooltip: 'Marketplace access required',
},
}}
/>HealthScoreGauge
Account Health
Composite score card with ProgressCircle gauge and sub-metric rows with status indicators, mini progress bars, and trend arrows.
Account Health Score
Last 30 days performance
Show code
<HealthScoreGauge data={{ overallScore: 78, overallStatus: 'good', metrics: [...] }} />Size Variants
Available in sm, md (default), and lg sizes.
sm
md
lg
Show code
<HealthScoreGauge data={data} size="sm" />InfoCard
Collapsible Info Card
Card with title and expandable content. defaultExpanded and onToggle supported.
Show code
<InfoCard title="How we calculate ROAS" defaultExpanded={false}>
<p>ROAS = Revenue / Ad Spend. We use last 30 days data.</p>
</InfoCard>InlineNotice
Borderless notice (billing-style copy)
Light grey surface, secondary text, links use primary + underline. `variant` picks icon + tint (here: `warning` = alert circle, amber).
Show code
<InlineNotice variant="warning">
<>… reach us at <a href="mailto:[email protected]" className="underline">[email protected]</a>.</>
</InlineNotice>TitleStatusCard
Title + status row (e.g. subscriptions)
Legacy billing `subsList`: success tone uses a 6% success tint (`bg-iw-success/[0.06]`), no border, `shadow-iw-sm`. Neutral uses `bg-iw-light-grey`.
Example grid
Show code
<TitleStatusCard title="Product name" />
<TitleStatusCard title="Other" statusLabel="Trialing" statusTone="neutral" />TitleStatusCard — custom status
Optional `statusLabel` and `statusTone`.
Show code
<TitleStatusCard title="Custom product line" statusLabel="Trialing" statusTone="neutral" />MetricChip
Interactive Metric Chips
Small chip representing a selected metric. Supports chart type switching (line/bar), removal, and color dots.
Show code
<MetricChip label="Spend" color="#4573D2" type="line" onTypeChange={...} onRemove={...} />Variants
Control visibility of color dot, chart type icons, and remove button.
Show code
<MetricChip label="CTR" showColor={false} showChartTypeIcons={false} showRemove={false} />MetricCardsDashboard
Metric Cards Grid
Responsive grid of MetricCards with optional customization via MetricCardSelector. cards, title, categories, size.
Key Metrics
Show code
<MetricCardsDashboard cards={cards} title="Key Metrics" size="sm" />Drag-to-Reorder (no Customize button)
Pass draggable={true} with showCustomize={false} to enable drag-reorder without showing the Customize button or per-card remove buttons. Pair with visibleOrder + onVisibleOrderChange for controlled persistence.
Show code
<MetricCardsDashboard
cards={cards}
showCustomize={false}
draggable={true}
visibleOrder={order}
onVisibleOrderChange={setOrder}
size="sm"
/>With Sparkline
Pass a sparkline object (values[], color, showArea) inside the data prop to render a mini trend chart below the value — as used in the Overview page KPI strip.
Show code
<MetricCard
data={{
title: 'Spend',
value: 526600000,
format: 'currency',
trend: 'up',
changePercent: 233.6,
sparkline: { values: [...], color: '#ef4444', showArea: false },
}}
size="sm"
/>Overview Page Layout (6-col subgrid)
Matches the Walmart Overview KPI strip exactly: 6-column grid with grid-template-rows: subgrid so title / value / sparkline / trend rows align horizontally across all cards. Drag-to-reorder enabled, Customize button hidden.
Show code
<MetricCardsDashboard
cards={cards}
showCustomize={false}
draggable={true}
visibleOrder={order}
onVisibleOrderChange={setOrder}
size="sm"
className={[
'[&>div]:!grid',
'[&>div]:[grid-template-columns:repeat(6,minmax(0,1fr))]',
'[&>div]:[grid-template-rows:repeat(4,auto)]',
'[&>div>div]:[grid-row:span_4]',
'[&>div>div]:grid',
'[&>div>div]:[grid-template-rows:subgrid]',
'[&>div>div>div]:!grid',
'[&>div>div>div]:[grid-row:span_4]',
'[&>div>div>div]:[grid-template-rows:subgrid]',
].join(' ')}
/>MetricCardSelector
Metric Card Selector Modal
Modal to pick which metric cards to display. Grouped by category with search and reset.
Show code
<MetricCardSelector isOpen={open} onClose={...} categories={cats} selectedKeys={keys} onApply={setKeys} />