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' } }} />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:help@intentwise.com" className="underline">help@intentwise.com</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" />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} />