From 0eac4d7ce8b931f7c96c2151864036563e5e301b Mon Sep 17 00:00:00 2001
From: Jeremiah Lowin <153965+jlowin@users.noreply.github.com>
Date: Sun, 29 Mar 2026 14:09:54 -0400
Subject: [PATCH] Add pie chart next to table in quickstart example

---
 docs/apps/quickstart.mdx | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/docs/apps/quickstart.mdx b/docs/apps/quickstart.mdx
index b8bba7db6..951b5f2f5 100644
--- a/docs/apps/quickstart.mdx
+++ b/docs/apps/quickstart.mdx
@@ -29,8 +29,11 @@ When your tool has something to *show* (a table of results, a chart, a status da
 Create `server.py`:
 
 ```python
+from collections import Counter
+
 from prefab_ui.app import PrefabApp
-from prefab_ui.components import Column, Heading, DataTable, DataTableColumn
+from prefab_ui.components import Column, Grid, Heading, DataTable, DataTableColumn
+from prefab_ui.components.charts import PieChart
 from fastmcp import FastMCP
 
 mcp = FastMCP("My First App")
@@ -45,20 +48,33 @@ def team_directory() -> PrefabApp:
         {"name": "Carol Johnson", "role": "Senior Engineer", "office": "London"},
         {"name": "David Kim", "role": "Product Manager", "office": "San Francisco"},
         {"name": "Eva Mueller", "role": "Engineer", "office": "Berlin"},
+        {"name": "Frank Lee", "role": "Data Scientist", "office": "San Francisco"},
+        {"name": "Grace Park", "role": "Engineering Manager", "office": "New York"},
+    ]
+
+    office_counts = [
+        {"office": office, "count": count}
+        for office, count in Counter(m["office"] for m in members).items()
     ]
 
     with PrefabApp() as app:
         with Column(gap=4, css_class="p-6"):
             Heading("Team Directory")
-            DataTable(
-                columns=[
-                    DataTableColumn(key="name", header="Name", sortable=True),
-                    DataTableColumn(key="role", header="Role", sortable=True),
-                    DataTableColumn(key="office", header="Office", sortable=True),
-                ],
-                rows=members,
-                search=True,
-            )
+            with Grid(columns=2, gap=4):
+                PieChart(
+                    data=office_counts,
+                    data_key="count",
+                    name_key="office",
+                )
+                DataTable(
+                    columns=[
+                        DataTableColumn(key="name", header="Name", sortable=True),
+                        DataTableColumn(key="role", header="Role", sortable=True),
+                        DataTableColumn(key="office", header="Office", sortable=True),
+                    ],
+                    rows=members,
+                    search=True,
+                )
 
     return app
 ```