Data component

Stats Bar

Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.

10 props0 slots0 outputsTheme readyResponsive

Interactive playground

Configure Stats Bar

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

Live preview

Composite components

Reusable public-page building blocks

Rendering

SSR

Server-first WRNexusJS rendering

Responsive

Yes

Mobile, tablet, and desktop layouts

Theme aware

Yes

Active theme and accent palettes

Component code

<StatsBar
  items='[
    {
      "id": "stats-bar-0-1",
      "key": "stats-bar-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": "#stats-bar-demo",
      "actionHref": "#stats-bar-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": "stats-bar-0-2",
      "key": "stats-bar-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#stats-bar-demo",
      "actionHref": "#stats-bar-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"
      ]
    }
  ]'
  compact="false"
/>

Component props10 controls

itemsunknown[]columnsnumbercompactbooleandividersbooleaniconsbooleansizestringcolorstringvariantstringmax Widthstringclassstring

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Public proof strip

Present key facts and trust signals in one compact responsive row.

Live preview

Composite components

Reusable public-page building blocks

Rendering

SSR

Server-first WRNexusJS rendering

Responsive

Yes

Mobile, tablet, and desktop layouts

Theme aware

Yes

Active theme and accent palettes

Component usage.wrn

<StatsBar
  items='[
    {
      "label": "Composite components",
      "value": "18",
      "description": "Reusable public-page building blocks",
      "icon": "icon-[lucide--blocks]",
      "color": "primary"
    },
    {
      "label": "Rendering",
      "value": "SSR",
      "description": "Server-first WRNexusJS rendering",
      "icon": "icon-[lucide--server]",
      "color": "info"
    },
    {
      "label": "Responsive",
      "value": "Yes",
      "description": "Mobile, tablet, and desktop layouts",
      "icon": "icon-[lucide--monitor-smartphone]",
      "color": "success"
    },
    {
      "label": "Theme aware",
      "value": "Yes",
      "description": "Active theme and accent palettes",
      "icon": "icon-[lucide--palette]",
      "color": "warning"
    }
  ]'
/>

Compact

Three-stat compact bar

Use fewer facts with tighter spacing below a hero or page header.

Live preview

Composite components

Reusable public-page building blocks

Rendering

SSR

Server-first WRNexusJS rendering

Responsive

Yes

Mobile, tablet, and desktop layouts

Component usage.wrn

<StatsBar
  items='[
    {
      "label": "Composite components",
      "value": "18",
      "description": "Reusable public-page building blocks",
      "icon": "icon-[lucide--blocks]",
      "color": "primary"
    },
    {
      "label": "Rendering",
      "value": "SSR",
      "description": "Server-first WRNexusJS rendering",
      "icon": "icon-[lucide--server]",
      "color": "info"
    },
    {
      "label": "Responsive",
      "value": "Yes",
      "description": "Mobile, tablet, and desktop layouts",
      "icon": "icon-[lucide--monitor-smartphone]",
      "color": "success"
    }
  ]'
  columns="3"
  icons="false"
  size="sm"
  variant="soft"
  maxWidth="wide"
/>

Advanced

Full-width solid statistics

Use a high-contrast statistics bar as a major landing-page transition.

Live preview

Composite components

Reusable public-page building blocks

Rendering

SSR

Server-first WRNexusJS rendering

Responsive

Yes

Mobile, tablet, and desktop layouts

Theme aware

Yes

Active theme and accent palettes

Component usage.wrn

<StatsBar
  items='[
    {
      "label": "Composite components",
      "value": "18",
      "description": "Reusable public-page building blocks",
      "icon": "icon-[lucide--blocks]",
      "color": "primary"
    },
    {
      "label": "Rendering",
      "value": "SSR",
      "description": "Server-first WRNexusJS rendering",
      "icon": "icon-[lucide--server]",
      "color": "info"
    },
    {
      "label": "Responsive",
      "value": "Yes",
      "description": "Mobile, tablet, and desktop layouts",
      "icon": "icon-[lucide--monitor-smartphone]",
      "color": "success"
    },
    {
      "label": "Theme aware",
      "value": "Yes",
      "description": "Active theme and accent palettes",
      "icon": "icon-[lucide--palette]",
      "color": "warning"
    }
  ]'
  compact="false"
  dividers="false"
  size="lg"
  variant="solid"
  maxWidth="full"
/>

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
`compact`	boolean	`true`	No
`dividers`	boolean	`true`	No
`icons`	boolean	`true`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"raised"`	No
`maxWidth`	string	`"xl"`	No
`class`	string	`""`	No