⚡ Dynamic Tabs for Alpha — Flexible Navigation with Pure JSON Control

dhishon · January 27, 2026, 6:17pm

Build Once. Configure Anywhere. Scale Effortlessly.

I’m excited to introduce a brand-new reusable UI component built for the Alpha Platform — Dynamic Tabs

This component is designed to make tab-based navigation fully dynamic, configurable, and production-ready — especially for enterprise applications across insurance, banking, and workflow-driven systems.

What is Dynamic Tabs?

Dynamic Tabs is a configuration-driven tab component, where the entire UI is controlled using data — not hardcoded layouts.

No static tabs
No repeated UI logic
No CSS rewrites

Simply update the configuration — and the UI adapts instantly

Why Dynamic Tabs?

In Alpha-based enterprise applications:

Screens change dynamically
Workflows vary by product
Business rules control UI behavior
The same component must work in multiple contexts

Static tabs don’t scale

That’s why Dynamic Tabs was built to be:

Flexible
Reusable
Safe after publish
Easy to configure
Enterprise-ready

Key Features

Fully Dynamic Rendering

Tabs are generated entirely from configuration
Supports any number of tabs
No code changes required

Multiple Independent Tab Groups

A single screen can contain multiple tab sections
Each group maintains its own active state
Selecting a tab in one group does not affect others

Variant Support

Choose the visual style based on the use case:

Outline — clean bordered tabs
Underline — navigation-style tabs
Filled — strong visual emphasis

All variants are controlled via configuration

Active Tab Control

Uses activeTabIndex (0-based)
Predictable and safe state handling
Avoids value collisions
Ideal for complex enterprise screens

Event-Driven Interaction

When a tab is clicked, the component emits:

{
  groupIndex,
  tabIndex,
  data
}

This enables seamless integration with:

Workflow navigation
API triggers
Section switching
Business logic execution

Serializable
Publish-safe
Fully Alpha-compatible

Configuration Structure

{
  "tabConfig": {
    "variant": "underline | outline | filled",
    "tabHeight": "40px",
    "tabRadius": "8px",
    "gap": "8px",
    "borderWidth": "1px",
    "colors": {
      "background": "#FAFAFA",
      "tabBackground": "#EC6453",
      "activeTabBackground": "#D03A39",
      "text": "#FFFFFF",
      "activeText": "#282B3E",
      "border": "#EDEDED",
      "indicator": "#FF9F00"
    }
  },
  "tabs": [
    { "id": "id-1", "label": "Tab label-1", "value": "event value" },
    { "id": "id-2", "label": "Tab label-2", "value": "event value" }
  ],
  "activeTabIndex": 0
}

Smart Default State for First-Time Setup

Dynamic Tabs is designed to be developer-friendly from the first drop.

When the component is added without any configuration, it automatically renders a guided empty state:

Displays that no tab groups are configured
Prompts the user to get started
Includes a “Copy starter config” button
Instantly generates a working JSON template

This allows developers to move from zero setup to a functional layout in seconds — no guesswork, no documentation hunting.

Visual Example

Before: Empty State

(Click the icon to generate starter config)

Add the config data to the component using local, co, or any other supported data source.

After: Dynamic Tabs Rendered

Theme Possibilities

Using the same structure, the component can support:

Banking dashboards (blue / navy themes)
Insurance workflows (gold / coral themes)
Dark admin panels
Clean content layouts
Product-specific branding

Same component. Different identity. Zero code changes.

Where Can This Be Used?

Dynamic Tabs fits naturally across Alpha Platform modules:

Banking applications
Insurance policy flows
Claim processing screens
Customer onboarding journeys
Admin dashboards
Case management systems
Workflow-driven applications

Anywhere structured navigation is required.

Preview

**
Config Structure:**

let data = {
  "_docs": {
    "component": "Dynamic Tabs",
    "description": "Renders one or more independent tab groups dynamically.",
    "structure": {
      "root": "Array → each object represents one tab group",
      "tabConfig": "Controls appearance & layout of tabs",
      "tabs": "List of tabs inside the group",
      "activeTabIndex": "Controls which tab is active (0-based)"
    },
    "behavior": {
      "defaults": "If a field is NOT provided, the component applies its default value.",
      "emptyValues": "If a field is provided as empty ('', null), default is NOT applied.",
      "isolation": "Each tab group is independent. Clicking one group does NOT affect others."
    },
    "variants": {
      "outline": "Bordered tabs (default)",
      "underline": "Underline only the active tab",
      "filled": "Filled background tabs"
    },
    "events": {
      "tab_click": "Emits when a tab is clicked with { groupIndex, tabIndex, data }"
    },
    "notes": [
      "Use activeTabIndex instead of activeTab string",
      "Indexes are 0-based",
      "Event payloads are serializable (safe after publish)"
    ]
  },

  "data": [

    /* ======================================================
       1️⃣ CLEAN ADMIN — DEFAULT OUTLINE
       ====================================================== */
    {
      "tabConfig": {
        "variant": "outline",
        "tabHeight": "40px",
        "tabRadius": "8px",
        "gap": "8px",
        "borderWidth": "1px",
        "colors": {
          "background": "#FAFAFA",
          "tabBackground": "#FFFFFF",
          "activeTabBackground": "#FFFFFF",
          "text": "#282B3E",
          "activeText": "#282B3E",
          "border": "#E0E0E0",
          "indicator": "#FF9F00"
        }
      },
      "tabs": [
        { "id": "overview", "label": "Overview", "value": "overview" },
        { "id": "details", "label": "Details", "value": "details" },
        { "id": "history", "label": "History", "value": "history" }
      ],
      "activeTabIndex": 0
    },

    /* ======================================================
       2️⃣ NAVIGATION — UNDERLINE STYLE
       ====================================================== */
    {
      "tabConfig": {
        "variant": "underline",
        "tabHeight": "42px",
        "tabRadius": "0px",
        "gap": "24px",
        "borderWidth": "0px",
        "colors": {
          "background": "#FFFFFF",
          "tabBackground": "#FFFFFF",
          "activeTabBackground": "#FFFFFF",
          "text": "#6B7280",
          "activeText": "#111827",
          "border": "#E5E7EB",
          "indicator": "#2563EB"
        }
      },
      "tabs": [
        { "id": "profile", "label": "Profile", "value": "profile" },
        { "id": "documents", "label": "Documents", "value": "documents" },
        { "id": "activity", "label": "Activity", "value": "activity" }
      ],
      "activeTabIndex": 1
    },

    /* ======================================================
       3️⃣ INSURANCE WORKFLOW — FILLED
       ====================================================== */
    {
      "tabConfig": {
        "variant": "filled",
        "tabHeight": "44px",
        "tabRadius": "10px",
        "gap": "10px",
        "borderWidth": "0px",
        "colors": {
          "background": "#F9FAFB",
          "tabBackground": "#EC6453",
          "activeTabBackground": "#D03A39",
          "text": "#FFFFFF",
          "activeText": "#FFFFFF",
          "border": "#E5E7EB",
          "indicator": "#FF9F00"
        }
      },
      "tabs": [
        { "id": "policy", "label": "Policy", "value": "policy" },
        { "id": "coverage", "label": "Coverage", "value": "coverage" },
        { "id": "premium", "label": "Premium", "value": "premium" }
      ],
      "activeTabIndex": 0
    },

    /* ======================================================
       4️⃣ BANKING DASHBOARD — BLUE THEME
       ====================================================== */
    {
      "tabConfig": {
        "variant": "outline",
        "tabHeight": "40px",
        "tabRadius": "6px",
        "gap": "8px",
        "borderWidth": "1px",
        "colors": {
          "background": "#F4F6FA",
          "tabBackground": "#FFFFFF",
          "activeTabBackground": "#FFFFFF",
          "text": "#1E3A8A",
          "activeText": "#1E3A8A",
          "border": "#CBD5E1",
          "indicator": "#2563EB"
        }
      },
      "tabs": [
        { "id": "accounts", "label": "Accounts", "value": "accounts" },
        { "id": "transactions", "label": "Transactions", "value": "transactions" },
        { "id": "statements", "label": "Statements", "value": "statements" }
      ],
      "activeTabIndex": 0
    },

    /* ======================================================
       5️⃣ DARK ADMIN — PREMIUM
       ====================================================== */
    {
      "tabConfig": {
        "variant": "underline",
        "tabHeight": "42px",
        "tabRadius": "0px",
        "gap": "22px",
        "borderWidth": "0px",
        "colors": {
          "background": "#1F2937",
          "tabBackground": "#1F2937",
          "activeTabBackground": "#1F2937",
          "text": "#9CA3AF",
          "activeText": "#FFFFFF",
          "border": "#374151",
          "indicator": "#FBBF24"
        }
      },
      "tabs": [
        { "id": "users", "label": "Users", "value": "users" },
        { "id": "roles", "label": "Roles", "value": "roles" },
        { "id": "settings", "label": "Settings", "value": "settings" }
      ],
      "activeTabIndex": 2
    },

    /* ======================================================
       6️⃣ ANALYTICS — CYAN
       ====================================================== */
    {
      "tabConfig": {
        "variant": "underline",
        "tabHeight": "42px",
        "tabRadius": "0px",
        "gap": "22px",
        "borderWidth": "0px",
        "colors": {
          "background": "#0F2A2A",
          "tabBackground": "#0F2A2A",
          "activeTabBackground": "#0F2A2A",
          "text": "#7DD3FC",
          "activeText": "#FFFFFF",
          "border": "#1F3E3E",
          "indicator": "#06B6D4"
        }
      },
      "tabs": [
        { "id": "metrics", "label": "Metrics", "value": "metrics" },
        { "id": "charts", "label": "Charts", "value": "charts" },
        { "id": "insights", "label": "Insights", "value": "insights" }
      ],
      "activeTabIndex": 1
    },

    /* ======================================================
       7️⃣ RISK ENGINE — VIOLET
       ====================================================== */
    {
      "tabConfig": {
        "variant": "underline",
        "tabHeight": "42px",
        "tabRadius": "0px",
        "gap": "22px",
        "borderWidth": "0px",
        "colors": {
          "background": "#1E1B2E",
          "tabBackground": "#1E1B2E",
          "activeTabBackground": "#1E1B2E",
          "text": "#B3B1C5",
          "activeText": "#FFFFFF",
          "border": "#2E2B44",
          "indicator": "#A78BFA"
        }
      },
      "tabs": [
        { "id": "rules", "label": "Rules", "value": "rules" },
        { "id": "scoring", "label": "Scoring", "value": "scoring" },
        { "id": "results", "label": "Results", "value": "results" }
      ],
      "activeTabIndex": 2
    },

    /* ======================================================
       8️⃣ EXECUTIVE VIEW — GOLD
       ====================================================== */
    {
      "tabConfig": {
        "variant": "underline",
        "tabHeight": "42px",
        "tabRadius": "0px",
        "gap": "22px",
        "borderWidth": "0px",
        "colors": {
          "background": "#1C1917",
          "tabBackground": "#1C1917",
          "activeTabBackground": "#1C1917",
          "text": "#E7E5E4",
          "activeText": "#FFFFFF",
          "border": "#292524",
          "indicator": "#F59E0B"
        }
      },
      "tabs": [
        { "id": "summary", "label": "Summary", "value": "summary" },
        { "id": "finance", "label": "Finance", "value": "finance" },
        { "id": "risk", "label": "Risk", "value": "risk" }
      ],
      "activeTabIndex": 0
    }

  ]
};

export const document_mock_data = data.data;

Visual

You’ll see:

Different tab variants
Multiple color themes
Independent tab groups
Clean and consistent interactions

Final Thoughts

Dynamic Tabs is more than just a UI component — it’s a scalable building block for serious Alpha applications.

Built with:

Configuration-first mindset
Enterprise stability
Developer simplicity
Design flexibility

Looking forward to feedback from the Alpha & Neutrinos community
More enhancements, themes, and improvements coming soon

@rakesh.k.sahoo @Lakshman_Kumar @Eldho

Eldho · January 28, 2026, 5:12am

Fantastic one @dhishon looking forward