Skip to content

Group (Tabs)

A tabbed card that renders multiple child widgets in the same grid cell. Each tab hosts one full widget. Switch between them by clicking the tab labels.

Configuration

{
  id: "my-group",
  type: "group",
  col: 1, row: 1, width: 6, height: 2,
  config: {
    title: "My Tabs",
    tabs: [
      {
        label: "Reddit",
        type: "reddit",
        config: { subreddit: "selfhosted", limit: 10 }
      },
      {
        label: "Hacker News",
        type: "hacker-news",
        config: { limit: 10 }
      }
    ]
  }
}

Options

Field Type Default Description
title string Card heading. Leave blank or omit to hide the title bar.
tabs array One or more tab definitions. Required.
tabs[].label string Text shown on the tab button.
tabs[].type string Widget type to render inside the tab. Cannot be "group".
tabs[].config object Full config object passed to the child widget.

Examples

News feeds in one card

{
  id: "news-tabs",
  type: "group",
  col: 1, row: 1, width: 6, height: 3,
  config: {
    tabs: [
      {
        label: "HN",
        type: "hacker-news",
        config: { limit: 15 }
      },
      {
        label: "Lobsters",
        type: "lobsters",
        config: { limit: 15 }
      },
      {
        label: "r/programming",
        type: "reddit",
        config: { subreddit: "programming", limit: 15 }
      }
    ]
  }
}

Monitoring + iframe

{
  id: "infra-tabs",
  type: "group",
  col: 7, row: 1, width: 6, height: 3,
  config: {
    title: "Infrastructure",
    tabs: [
      {
        label: "Status",
        type: "monitor",
        config: {
          sites: [
            { label: "Portainer", url: "http://192.168.1.10:9000" },
            { label: "Grafana",   url: "http://192.168.1.10:3000" }
          ]
        }
      },
      {
        label: "Grafana",
        type: "iframe",
        config: { url: "http://192.168.1.10:3000/d/home?kiosk", height: 500 }
      }
    ]
  }
}

No nesting

A group widget cannot be used as a child inside another group. Setting type: "group" inside a tab definition is not supported and will be ignored.

Shared space

All tabs share the same card dimensions (width and height). Size the card to fit the tallest child widget.