// Generated by scripts/generate-showcase.mjs. Do not edit directly. page MetricGridDetail { layout = "showcase" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Public services\",\"value\":\"24\",\"description\":\"Citizen-facing services available online.\",\"icon\":\"icon-[lucide--hand-heart]\",\"trend\":\"+4\",\"trendLabel\":\"this release\",\"trendDirection\":\"up\",\"color\":\"primary\"},{\"label\":\"Police stations\",\"value\":\"126\",\"description\":\"Searchable station and jurisdiction entries.\",\"icon\":\"icon-[lucide--landmark]\",\"trend\":\"Updated\",\"trendLabel\":\"today\",\"color\":\"info\"},{\"label\":\"Availability\",\"value\":\"99.9\",\"suffix\":\"%\",\"description\":\"Target service availability.\",\"icon\":\"icon-[lucide--activity]\",\"trend\":\"Stable\",\"trendLabel\":\"30 days\",\"trendDirection\":\"positive\",\"color\":\"success\"}]") state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3") state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2") state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1") state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true" state playground_dividers = (ctx.url.searchParams.get("pg_dividers") ?? "false") === "true" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full" state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? "" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Metric Grid" description = "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid." } view {
Data component

Metric Grid

Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.

13 props1 slots2 eventsTheme readyResponsive
Interactive playground

Configure Metric Grid

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<MetricGrid
  items='[
    {
      "id": "metric-grid-0-1",
      "key": "metric-grid-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#metric-grid-demo",
      "actionHref": "#metric-grid-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "metric-grid-0-2",
      "key": "metric-grid-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#metric-grid-demo",
      "actionHref": "#metric-grid-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Event outputInteract with the preview to inspect event.detail.
Component props13 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Three-column KPI grid

Display operational values in a full-width, responsive grid.

01
Live preview
Component usage.wrn
<MetricGrid
  items='[
    {
      "label": "Public services",
      "value": "24",
      "description": "Citizen-facing services available online.",
      "icon": "icon-[lucide--hand-heart]",
      "trend": "+4",
      "trendLabel": "this release",
      "trendDirection": "up",
      "color": "primary"
    },
    {
      "label": "Police stations",
      "value": "126",
      "description": "Searchable station and jurisdiction entries.",
      "icon": "icon-[lucide--landmark]",
      "trend": "Updated",
      "trendLabel": "today",
      "color": "info"
    },
    {
      "label": "Availability",
      "value": "99.9",
      "suffix": "%",
      "description": "Target service availability.",
      "icon": "icon-[lucide--activity]",
      "trend": "Stable",
      "trendLabel": "30 days",
      "trendDirection": "positive",
      "color": "success"
    }
  ]'
  columns="3"
  gap="lg"
/>
Compact

Unified metrics bar

Use dividers to present compact metrics as one cohesive surface.

02
Live preview
Component usage.wrn
<MetricGrid
  items='[
    {
      "label": "Public services",
      "value": "24",
      "description": "Citizen-facing services available online.",
      "icon": "icon-[lucide--hand-heart]",
      "trend": "+4",
      "trendLabel": "this release",
      "trendDirection": "up",
      "color": "primary"
    },
    {
      "label": "Police stations",
      "value": "126",
      "description": "Searchable station and jurisdiction entries.",
      "icon": "icon-[lucide--landmark]",
      "trend": "Updated",
      "trendLabel": "today",
      "color": "info"
    },
    {
      "label": "Availability",
      "value": "99.9",
      "suffix": "%",
      "description": "Target service availability.",
      "icon": "icon-[lucide--activity]",
      "trend": "Stable",
      "trendLabel": "30 days",
      "trendDirection": "positive",
      "color": "success"
    }
  ]'
  columns="3"
  gap="none"
  dividers="true"
  size="sm"
  variant="secondary"
  maxWidth="wide"
/>
Advanced

Auto-fit monitoring grid

Allow cards to wrap automatically when the number of metrics changes.

03
Live preview
Component usage.wrn
<MetricGrid
  items='[
    {
      "label": "Public services",
      "value": "24",
      "description": "Citizen-facing services available online.",
      "icon": "icon-[lucide--hand-heart]",
      "trend": "+4",
      "trendLabel": "this release",
      "trendDirection": "up",
      "color": "primary"
    },
    {
      "label": "Police stations",
      "value": "126",
      "description": "Searchable station and jurisdiction entries.",
      "icon": "icon-[lucide--landmark]",
      "trend": "Updated",
      "trendLabel": "today",
      "color": "info"
    },
    {
      "label": "Availability",
      "value": "99.9",
      "suffix": "%",
      "description": "Target service availability.",
      "icon": "icon-[lucide--activity]",
      "trend": "Stable",
      "trendLabel": "30 days",
      "trendDirection": "positive",
      "color": "success"
    },
    {
      "label": "Response time",
      "value": "1.8",
      "suffix": "s",
      "description": "Median API response",
      "icon": "icon-[lucide--timer]",
      "color": "warning",
      "progress": 72,
      "progressLabel": "Target"
    }
  ]'
  size="lg"
  variant="soft"
  minItemWidth="17rem"
/>
Component events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@selectFires when an item, option, card, or result is selected.
@actionFires when the component's primary or item action is activated.
Declarative handlers.wrn
<MetricGrid
  @select='console.log(event.detail)'
  @action='console.log(event.detail)'
/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"MetricGrid\"], [data-component=\"MetricGrid\"]")

component?.addEventListener("select", (event) => {
  console.log("select", event.detail)
})

component?.addEventListener("action", (event) => {
  console.log("action", event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
itemsstring[]No
columnsnumber4No
tabletColumnsnumber2No
mobileColumnsnumber1No
gapstring"md"No
equalHeightbooleantrueNo
dividersbooleanfalseNo
sizestring"default"No
colorstring"primary"No
variantstring"default"No
maxWidthstring"full"No
minItemWidthstring""No
classstring""No
} }