new: dashboards

native/export.py

@@ -5,6 +5,7 @@
 from native.pages.blocks import blocks_page
 from native.pages.components import components_page
 from native.pages.create import create_page
+from native.pages.dashboard import dashboard_page
 from native.pages.docs import docs_page
 from native.pages.landing import landing_page
 from native.pages.typeset import typeset_page
@@ -15,6 +16,18 @@
 
 def export(app: App):
 
+    app.add_page(
+        component=dashboard_page(),
+        route="/dashboards",
+        title="Dashboards - buridan/native",
+        meta=generate_site_meta_tags(
+            title="Dashboards",
+            url="/dashboards",
+            description="Build responsive dashboards for analytics, monitoring, and data-driven applications using composable UI components.",
+            social_card="dashboards.webp",
+        ),
+    )
+
     app.add_page(
         component=blocks_page(),
         route="/blocks",

native/lib/blocks/bar_chart_02.py

@@ -100,12 +100,12 @@ def bar_chart_02():
                 ),
                 rx.el.p("$0.7M", class_name="mt-0.5 text-base font-semibold"),
             ),
-            class_name="flex gap-10 px-4",
+            class_name="flex gap-10",
         ),
         rx.el.div(
             rx.el.div(_chart(show_y_axis=False), class_name="sm:hidden"),
             rx.el.div(_chart(show_y_axis=True), class_name="hidden sm:block"),
         ),
         class_name=chart_tooltip_content([1, 2], "square")
-        + " w-full flex flex-col gap-6",
+        + " w-full flex flex-col gap-4",
     )

native/lib/blocks/kpi_card_01.py

@@ -21,6 +21,12 @@
         "change": "-4.8%",
         "color": "bg-chart-3",
     },
+    {
+        "name": "Monthly retention",
+        "stat": "82.4%",
+        "change": "+2.7%",
+        "color": "bg-chart-4",
+    },
 ]
 
 
@@ -52,5 +58,5 @@ def _kpi_card(name: str, stat: str, change: str, color: str) -> rx.Component:
 def kpi_card_01():
     return rx.el.dl(
         *[_kpi_card(**item) for item in data],
-        class_name="w-full grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3",
+        class_name="w-full grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4",
     )