MetricCard

MetricCard renders one trusted number with a label, optional trend, and short context line.

import { MetricCard } from "@/components/fable-ui/metric-card/metric-card"

export function RevenueMetric() {
  return (
    <MetricCard
      label="Revenue today"
      value="EGP 4,200"
      trend={{ direction: "up", delta: "+18% vs yesterday" }}
      context="Best Monday this month"
      variant="elevated"

Installation#

pnpm dlx shadcn@latest add shobky/fable-ui/metric-card

Tool#

The AI SDK tool name is show_metric.

Installed files include:

Copycomponents/fable-ui/metric-card/metric-card.tsx
components/fable-ui/metric-card/index.ts
lib/fable-ui/tools/show-metric-tool.ts
lib/fable-ui/manifests/show-metric.md

MetricCard also depends on the shared Fable core renderer and shadcn card, badge, and skeleton primitives.

Usage#

Copyimport { MetricCard } from "@/components/fable-ui/metric-card/metric-card"
 
export function RevenueMetric() {
  return (
    <MetricCard
      label="Revenue today"
      value="EGP 4,200"
      trend={{ direction: "up", delta: "+18% vs yesterday" }}
      context="Best Monday this month"
      variant="elevated"
    />
  )
}

Payload#

Copy{
  label: string
  value: string
  trend?: {
    direction: "up" | "down" | "neutral"
    delta: string
  }
  context?: string
}

States#

The preview shows ready, loading, empty, error, and disabled states. At runtime those come from the AI SDK tool part state, schema validation, or toolMetadata.fableState.

Manifest#

The manifest explains that show_metric is for one primary number, not tables, browsing, forms, or confirmations. Read the Manifests guide for the shared format.

---
tool: show_metric
type: registry:component
---

# show_metric

Use `show_metric` when the assistant has one trusted, display-ready number that benefits from visual emphasis.

Use it for totals, counts, amounts, percentages, balances, SLA values, or another KPI that has already been computed by host logic.

Avoid it for lists, browsing, tables, forms, confirmations, destructive operations, or long explanations.

The payload must include `label` and `value`. Optional `trend` and `context` should clarify the number without inventing data.

When to use#

Use for totals, counts, amounts, percentages, balances, SLA values, or another KPI already computed by trusted host logic.

Do not use for lists, tables, browsing, forms, confirmations, destructive actions, or long prose explanations.