Data component

Metric Grid

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

13 props1 slots2 outputsTheme readyResponsive

Interactive playground

Configure Metric Grid

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

Live preview

Public services

Citizen-facing services available online.

+4 this release

Police stations

126

Searchable station and jurisdiction entries.

Updated today

Availability

99.9 %

Target service availability.

Stable 30 days

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 the typed payload.

Component props13 controls

itemsunknown[]columnsnumbertablet Columnsnumbermobile Columnsnumbergapstringequal Heightbooleandividersbooleansizestringcolorstringvariantstringmax Widthstringmin Item Widthstringclassstring

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.

Live preview

Public services

Citizen-facing services available online.

+4 this release

Police stations

126

Searchable station and jurisdiction entries.

Updated today

Availability

99.9 %

Target service availability.

Stable 30 days

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.

Live preview

Public services

Citizen-facing services available online.

+4 this release

Police stations

126

Searchable station and jurisdiction entries.

Updated today

Availability

99.9 %

Target service availability.

Stable 30 days

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.

Live preview

Public services

Citizen-facing services available online.

+4 this release

Police stations

126

Searchable station and jurisdiction entries.

Updated today

Availability

99.9 %

Target service availability.

Stable 30 days

Response time

1.8 s

Median API response

Target 72%

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 outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@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(payload)'
  @action='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"MetricGrid\"], [data-component=\"MetricGrid\"]")

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})

Component API

Props and configuration

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

Prop	Type	Default	Required
`items`	unknown[]	`[]`	No
`columns`	number	`4`	No
`tabletColumns`	number	`2`	No
`mobileColumns`	number	`1`	No
`gap`	string	`"md"`	No
`equalHeight`	boolean	`true`	No
`dividers`	boolean	`false`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`maxWidth`	string	`"full"`	No
`minItemWidth`	string	`""`	No
`class`	string	`""`	No