> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy Pipeline

> CI/CD pipeline tracker with progress gauges and status badges.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

A deployment pipeline view with service names, deployment stages, progress bars, and status badges. The DataTable uses component cells for rich inline rendering: badges for stage status and progress bars for rollout completion.

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Deploy Pipeline"},{"type":"CardDescription","content":"Current deployment status across all services"}]},{"type":"CardContent","children":[{"type":"DataTable","columns":[{"key":"service","header":"Service","sortable":true},{"key":"stage","header":"Stage","sortable":false,"headerClass":"text-center","cellClass":"text-center"},{"key":"progress","header":"Rollout","sortable":false,"width":"200px"},{"key":"status","header":"","sortable":false,"headerClass":"text-right","cellClass":"text-right"}],"rows":[{"service":{"cssClass":"font-semibold text-card-foreground","content":"auth-service","code":false,"type":"Span"},"stage":{"type":"Badge","label":"Production","variant":"success"},"progress":{"type":"Progress","value":100.0,"max":100.0,"variant":"success","size":"lg"},"status":{"type":"Badge","label":"100%","variant":"success"}},{"service":{"cssClass":"font-semibold text-card-foreground","content":"data-ingest","code":false,"type":"Span"},"stage":{"type":"Badge","label":"Staging","variant":"default"},"progress":{"type":"Progress","value":72.0,"max":100.0,"variant":"default","size":"lg"},"status":{"type":"Badge","label":"72%","variant":"default"}},{"service":{"cssClass":"font-semibold text-card-foreground","content":"ml-pipeline","code":false,"type":"Span"},"stage":{"type":"Badge","label":"Canary","variant":"warning"},"progress":{"type":"Progress","value":45.0,"max":100.0,"variant":"warning","size":"lg"},"status":{"type":"Badge","label":"45%","variant":"warning"}},{"service":{"cssClass":"font-semibold text-card-foreground","content":"web-frontend","code":false,"type":"Span"},"stage":{"type":"Badge","label":"Rolling","variant":"default"},"progress":{"type":"Progress","value":88.0,"max":100.0,"variant":"default","size":"lg"},"status":{"type":"Badge","label":"88%","variant":"default"}},{"service":{"cssClass":"font-semibold text-card-foreground","content":"event-bus","code":false,"type":"Span"},"stage":{"type":"Badge","label":"Blocked","variant":"destructive"},"progress":{"type":"Progress","value":12.0,"max":100.0,"variant":"destructive","size":"lg"},"status":{"type":"Badge","label":"12%","variant":"destructive"}},{"service":{"cssClass":"font-semibold text-card-foreground","content":"cache-layer","code":false,"type":"Span"},"stage":{"type":"Badge","label":"Production","variant":"success"},"progress":{"type":"Progress","value":100.0,"max":100.0,"variant":"success","size":"lg"},"status":{"type":"Badge","label":"100%","variant":"success"}},{"service":{"cssClass":"font-semibold text-card-foreground","content":"search-index","code":false,"type":"Span"},"stage":{"type":"Badge","label":"Rolling","variant":"default"},"progress":{"type":"Progress","value":63.0,"max":100.0,"variant":"default","size":"lg"},"status":{"type":"Badge","label":"63%","variant":"default"}}],"search":true,"paginated":false,"pageSize":10}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQmFkZ2UsIENhcmQsIENhcmRDb250ZW50LCBDYXJkRGVzY3JpcHRpb24sIENhcmRIZWFkZXIsIENhcmRUaXRsZSwKICAgIERhdGFUYWJsZSwgRGF0YVRhYmxlQ29sdW1uLCBEaXYsIFByb2dyZXNzLCBTcGFuLAopCgpzZXJ2aWNlcyA9IFsKICAgICgiYXV0aC1zZXJ2aWNlIiwgIlByb2R1Y3Rpb24iLCAxMDAsICJzdWNjZXNzIiksCiAgICAoImRhdGEtaW5nZXN0IiwgIlN0YWdpbmciLCA3MiwgImRlZmF1bHQiKSwKICAgICgibWwtcGlwZWxpbmUiLCAiQ2FuYXJ5IiwgNDUsICJ3YXJuaW5nIiksCiAgICAoIndlYi1mcm9udGVuZCIsICJSb2xsaW5nIiwgODgsICJkZWZhdWx0IiksCiAgICAoImV2ZW50LWJ1cyIsICJCbG9ja2VkIiwgMTIsICJkZXN0cnVjdGl2ZSIpLAogICAgKCJjYWNoZS1sYXllciIsICJQcm9kdWN0aW9uIiwgMTAwLCAic3VjY2VzcyIpLAogICAgKCJzZWFyY2gtaW5kZXgiLCAiUm9sbGluZyIsIDYzLCAiZGVmYXVsdCIpLApdCgpyb3dzID0gW10KZm9yIG5hbWUsIHN0YWdlLCBwY3QsIHZhcmlhbnQgaW4gc2VydmljZXM6CiAgICByb3dzLmFwcGVuZCh7CiAgICAgICAgInNlcnZpY2UiOiBTcGFuKG5hbWUsIGNzc19jbGFzcz0iZm9udC1zZW1pYm9sZCB0ZXh0LWNhcmQtZm9yZWdyb3VuZCIpLAogICAgICAgICJzdGFnZSI6IEJhZGdlKHN0YWdlLCB2YXJpYW50PXZhcmlhbnQpLAogICAgICAgICJwcm9ncmVzcyI6IFByb2dyZXNzKHZhbHVlPXBjdCwgbWF4PTEwMCwgdmFyaWFudD12YXJpYW50LCBzaXplPSJsZyIpLAogICAgICAgICJzdGF0dXMiOiBCYWRnZShmIntwY3R9JSIsIHZhcmlhbnQ9dmFyaWFudCksCiAgICB9KQoKd2l0aCBDYXJkKGNzc19jbGFzcz0idy1mdWxsIik6CiAgICB3aXRoIENhcmRIZWFkZXIoKToKICAgICAgICBDYXJkVGl0bGUoIkRlcGxveSBQaXBlbGluZSIpCiAgICAgICAgQ2FyZERlc2NyaXB0aW9uKCJDdXJyZW50IGRlcGxveW1lbnQgc3RhdHVzIGFjcm9zcyBhbGwgc2VydmljZXMiKQogICAgd2l0aCBDYXJkQ29udGVudCgpOgogICAgICAgIERhdGFUYWJsZSgKICAgICAgICAgICAgY29sdW1ucz1bCiAgICAgICAgICAgICAgICBEYXRhVGFibGVDb2x1bW4oa2V5PSJzZXJ2aWNlIiwgaGVhZGVyPSJTZXJ2aWNlIiwgc29ydGFibGU9VHJ1ZSksCiAgICAgICAgICAgICAgICBEYXRhVGFibGVDb2x1bW4oa2V5PSJzdGFnZSIsIGhlYWRlcj0iU3RhZ2UiLCBhbGlnbj0iY2VudGVyIiksCiAgICAgICAgICAgICAgICBEYXRhVGFibGVDb2x1bW4oa2V5PSJwcm9ncmVzcyIsIGhlYWRlcj0iUm9sbG91dCIsIHdpZHRoPSIyMDBweCIpLAogICAgICAgICAgICAgICAgRGF0YVRhYmxlQ29sdW1uKGtleT0ic3RhdHVzIiwgaGVhZGVyPSIiLCBhbGlnbj0icmlnaHQiKSwKICAgICAgICAgICAgXSwKICAgICAgICAgICAgcm93cz1yb3dzLAogICAgICAgICAgICBzZWFyY2g9VHJ1ZSwKICAgICAgICApCg">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import (
        Badge, Card, CardContent, CardDescription, CardHeader, CardTitle,
        DataTable, DataTableColumn, Div, Progress, Span,
    )

    services = [
        ("auth-service", "Production", 100, "success"),
        ("data-ingest", "Staging", 72, "default"),
        ("ml-pipeline", "Canary", 45, "warning"),
        ("web-frontend", "Rolling", 88, "default"),
        ("event-bus", "Blocked", 12, "destructive"),
        ("cache-layer", "Production", 100, "success"),
        ("search-index", "Rolling", 63, "default"),
    ]

    rows = []
    for name, stage, pct, variant in services:
        rows.append({
            "service": Span(name, css_class="font-semibold text-card-foreground"),
            "stage": Badge(stage, variant=variant),
            "progress": Progress(value=pct, max=100, variant=variant, size="lg"),
            "status": Badge(f"{pct}%", variant=variant),
        })

    with Card(css_class="w-full"):
        with CardHeader():
            CardTitle("Deploy Pipeline")
            CardDescription("Current deployment status across all services")
        with CardContent():
            DataTable(
                columns=[
                    DataTableColumn(key="service", header="Service", sortable=True),
                    DataTableColumn(key="stage", header="Stage", align="center"),
                    DataTableColumn(key="progress", header="Rollout", width="200px"),
                    DataTableColumn(key="status", header="", align="right"),
                ],
                rows=rows,
                search=True,
            )
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Card",
        "children": [
          {
            "type": "CardHeader",
            "children": [
              {"type": "CardTitle", "content": "Deploy Pipeline"},
              {
                "type": "CardDescription",
                "content": "Current deployment status across all services"
              }
            ]
          },
          {
            "type": "CardContent",
            "children": [
              {
                "type": "DataTable",
                "columns": [
                  {"key": "service", "header": "Service", "sortable": true},
                  {
                    "key": "stage",
                    "header": "Stage",
                    "sortable": false,
                    "headerClass": "text-center",
                    "cellClass": "text-center"
                  },
                  {"key": "progress", "header": "Rollout", "sortable": false, "width": "200px"},
                  {
                    "key": "status",
                    "header": "",
                    "sortable": false,
                    "headerClass": "text-right",
                    "cellClass": "text-right"
                  }
                ],
                "rows": [
                  {
                    "service": {
                      "cssClass": "font-semibold text-card-foreground",
                      "content": "auth-service",
                      "code": false,
                      "type": "Span"
                    },
                    "stage": {"type": "Badge", "label": "Production", "variant": "success"},
                    "progress": {
                      "type": "Progress",
                      "value": 100.0,
                      "max": 100.0,
                      "variant": "success",
                      "size": "lg"
                    },
                    "status": {"type": "Badge", "label": "100%", "variant": "success"}
                  },
                  {
                    "service": {
                      "cssClass": "font-semibold text-card-foreground",
                      "content": "data-ingest",
                      "code": false,
                      "type": "Span"
                    },
                    "stage": {"type": "Badge", "label": "Staging", "variant": "default"},
                    "progress": {
                      "type": "Progress",
                      "value": 72.0,
                      "max": 100.0,
                      "variant": "default",
                      "size": "lg"
                    },
                    "status": {"type": "Badge", "label": "72%", "variant": "default"}
                  },
                  {
                    "service": {
                      "cssClass": "font-semibold text-card-foreground",
                      "content": "ml-pipeline",
                      "code": false,
                      "type": "Span"
                    },
                    "stage": {"type": "Badge", "label": "Canary", "variant": "warning"},
                    "progress": {
                      "type": "Progress",
                      "value": 45.0,
                      "max": 100.0,
                      "variant": "warning",
                      "size": "lg"
                    },
                    "status": {"type": "Badge", "label": "45%", "variant": "warning"}
                  },
                  {
                    "service": {
                      "cssClass": "font-semibold text-card-foreground",
                      "content": "web-frontend",
                      "code": false,
                      "type": "Span"
                    },
                    "stage": {"type": "Badge", "label": "Rolling", "variant": "default"},
                    "progress": {
                      "type": "Progress",
                      "value": 88.0,
                      "max": 100.0,
                      "variant": "default",
                      "size": "lg"
                    },
                    "status": {"type": "Badge", "label": "88%", "variant": "default"}
                  },
                  {
                    "service": {
                      "cssClass": "font-semibold text-card-foreground",
                      "content": "event-bus",
                      "code": false,
                      "type": "Span"
                    },
                    "stage": {"type": "Badge", "label": "Blocked", "variant": "destructive"},
                    "progress": {
                      "type": "Progress",
                      "value": 12.0,
                      "max": 100.0,
                      "variant": "destructive",
                      "size": "lg"
                    },
                    "status": {"type": "Badge", "label": "12%", "variant": "destructive"}
                  },
                  {
                    "service": {
                      "cssClass": "font-semibold text-card-foreground",
                      "content": "cache-layer",
                      "code": false,
                      "type": "Span"
                    },
                    "stage": {"type": "Badge", "label": "Production", "variant": "success"},
                    "progress": {
                      "type": "Progress",
                      "value": 100.0,
                      "max": 100.0,
                      "variant": "success",
                      "size": "lg"
                    },
                    "status": {"type": "Badge", "label": "100%", "variant": "success"}
                  },
                  {
                    "service": {
                      "cssClass": "font-semibold text-card-foreground",
                      "content": "search-index",
                      "code": false,
                      "type": "Span"
                    },
                    "stage": {"type": "Badge", "label": "Rolling", "variant": "default"},
                    "progress": {
                      "type": "Progress",
                      "value": 63.0,
                      "max": 100.0,
                      "variant": "default",
                      "size": "lg"
                    },
                    "status": {"type": "Badge", "label": "63%", "variant": "default"}
                  }
                ],
                "search": true,
                "paginated": false,
                "pageSize": 10
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## How It Works

This page is one [DataTable](/components/data-table) whose cells are themselves components. The `services` list holds tuples of `(name, stage, pct, variant)`, and the build loop turns each into a row dict where every value is a fully constructed component rather than a string: a [Span](/components/div-span) for the bolded service name, a [Badge](/components/badge) for the stage, a [Progress](/components/progress) bar for rollout, and another Badge for the percentage. Because a DataTable cell renders any component, the table doubles as a layout grid for rich inline widgets — progress bars and status pills sit in aligned columns without any extra markup.

The `variant` from each tuple is the through-line that keeps a row visually coherent. A single value (`success`, `warning`, `default`, or `destructive`) is threaded into the stage badge, the progress bar, and the status badge at once, so a blocked service reads red across all three columns and a healthy one reads green. Computing that classification once per service in Python guarantees the three components can't fall out of sync.

The column definitions control structure rather than content. `DataTableColumn(key="progress", header="Rollout", width="200px")` reserves a fixed width so the bars line up, `align="center"` centers the stage badges, and `align="right"` with an empty `header=""` tucks the status badge against the row's edge. Only `Service` is marked `sortable=True`; combined with `search=True`, that gives you alphabetical sorting and a filter box over a table whose cells are components.

The data here is static and embedded in the script, so the page is entirely client-side — the renderer handles sorting and search on its own with no server round-trip. To make it live, you would replace the hardcoded `services` list with data fetched from your backend. That is the client/server boundary in Prefab: a [Fetch](/actions/fetch) or [CallTool](/actions/call-tool) action runs on the client, calls your server, and writes the response into [state](/concepts/state) — typically via `on_success` reading `$result` — after which the same table rebuilds reactively from the new rows.