new: blocks

app/examples/utils.py

@@ -2,7 +2,117 @@
 
 import reflex as rx
 
-from app.hooks import selected_component_category
+from app.hooks import selected_blocks_category, selected_component_category
+from app.www.wrapper import generate_component_id
+from components.icons.hugeicon import hi
+from components.ui.button import button
+from components.ui.tooltip import tooltip
+
+
+def open_in_reflex_build(
+    icon_light,
+    icon_dark,
+    tooltip_content: str,
+    href: str,
+    icon_size: str = "size-5",
+):
+    return tooltip.provider(
+        tooltip.root(
+            tooltip.trigger(
+                render_=rx.el.a(
+                    rx.el.image(
+                        rx.color_mode_cond(icon_light, icon_dark),
+                        class_name=icon_size,
+                    ),
+                    href=href,
+                    target="_blank",
+                    rel="noopener noreferrer",
+                )
+            ),
+            tooltip.portal(
+                tooltip.positioner(
+                    tooltip.popup(
+                        rx.el.p(tooltip_content, class_name="!text-xs"),
+                        class_name="rounded-radius p-2",
+                    ),
+                    side="top",
+                    side_offset=8,
+                ),
+            ),
+        ),
+        delay=0,
+    )
+
+
+def block_card(func=None, *, label=""):
+    """
+    Decorator wrapper to wrap blocks
+    """
+
+    if func is None:
+        return functools.partial(block_card, label=label)
+
+    @functools.wraps(func)
+    def wrapper(*args, **kwargs):
+        inner_component = func(*args, **kwargs)
+        cmd = f"uv run buridan add {func.__qualname__}"
+        btn_id = generate_component_id()
+        return rx.el.div(
+            rx.el.div(
+                button(
+                    hi("TerminalIcon", class_name="size-4 shrink-0"),
+                    cmd,
+                    variant="outline",
+                    size="sm",
+                    id=btn_id,
+                    on_click=rx.call_script(f"""
+                        const btn = document.getElementById({btn_id!r});
+                        navigator.clipboard.writeText({cmd!r});
+
+                        const original = btn.innerText;
+                        btn.innerText = "Copied!";
+
+                        setTimeout(() => {{
+                            btn.innerText = original;
+                        }}, 1000);
+                    """),
+                    class_name="min-w-3xs",
+                ),
+                rx.el.p("︲", class_name="text-muted-foreground/50 font-thin h-6"),
+                open_in_reflex_build(
+                    icon_light="/svg/reflex/reflex_light.svg",
+                    icon_dark="/svg/reflex/reflex_dark.svg",
+                    tooltip_content="Open in Reflex Build",
+                    href=f"https://build.reflex.dev/?prompt=Install and run pip install buridan-create and buridan init. Then run the following command: buridan add {func.__qualname__}",
+                ),
+                class_name="flex flex-row gap-x-2 items-center justify-end px-6 sm:px-2",
+            ),
+            rx.el.div(
+                inner_component,
+                class_name=" ".join(
+                    [
+                        "break-inside-avoid",
+                        "w-full h-full",
+                        "p-7",
+                        "flex flex-col",
+                    ]
+                ),
+            ),
+            class_name=" ".join(
+                [
+                    "w-full flex flex-col",
+                    "gap-y-2",
+                ]
+            )
+            + rx.cond(
+                (selected_blocks_category.value == "all")
+                | (selected_blocks_category.value == label),
+                " flex",
+                " hidden",
+            ).to(str),
+        )
+
+    return wrapper
 
 
 def masonry_card(func=None, *, label="General"):

app/export.py

@@ -1,5 +1,6 @@
 import reflex as rx
 
+from app.pages.blocks import blocks_page
 from app.pages.charts import chart_page
 from app.pages.components import components_page
 from app.pages.landing import landing_page
@@ -35,6 +36,18 @@ def export_site(app: rx.App):
         ),
     )
 
+    app.add_page(
+        component=blocks_page(),
+        route="/blocks",
+        title="Building Blocks for Dashboards - buridan/ui",
+        meta=generate_site_meta_tags(
+            title="Blocks",
+            url="/blocks",
+            description="Clean, modern building blocks for Reflex dashboards. Copy and paste into your apps. Open Source. Extensible.",
+            social_card="blocks.webp",
+        ),
+    )
+
     app.add_page(
         component=components_page(),
         route="/components",

app/hooks.py

@@ -46,6 +46,8 @@
     "selected_component_category", "All"
 )
 
+selected_blocks_category = ClientStateVar.create("selected_blocks_category", "all")
+
 search_items_cs = ClientStateVar.create(
     "search_items_cs",
     routes.GET_STARTED_URLS + routes.BASE_UI_COMPONENTS + routes.CHARTS_URLS,

app/pages/blocks.py

@@ -0,0 +1,88 @@
+from pathlib import Path
+
+import reflex as rx
+
+from app.examples.utils import block_card
+from app.hooks import selected_blocks_category
+from app.templates.layout import layout_decorator
+from app.www.library.blocks.area_chart_01 import area_chart_01
+from app.www.library.blocks.area_chart_02 import area_chart_02
+from app.www.library.blocks.bar_chart_01 import bar_chart_01
+from app.www.library.blocks.bar_chart_02 import bar_chart_02
+from app.www.library.blocks.bar_chart_03 import bar_chart_03
+from app.www.library.blocks.bar_chart_04 import bar_chart_04
+from app.www.library.blocks.kpi_card_01 import kpi_card_01
+from app.www.library.blocks.kpi_card_02 import kpi_card_02
+from app.www.library.blocks.line_chart_01 import line_chart_01
+from app.www.library.blocks.line_chart_02 import line_chart_02
+from app.www.library.blocks.line_chart_03 import line_chart_03
+from app.www.library.blocks.line_chart_04 import line_chart_04
+from components.ui.button import BUTTON_VARIANTS, button
+
+BLOCKS = [
+    {"name": "All", "value": "all"},
+    {"name": "Bar Charts", "value": "bar"},
+    {"name": "Line Charts", "value": "line"},
+    {"name": "Area Charts", "value": "area"},
+    {"name": "KPI Cards", "value": "kpi"},
+]
+
+NUM_BLOCK_FILES = len(
+    [f for f in Path("app/www/library/blocks").iterdir() if f.is_file()]
+)
+
+
+@layout_decorator(
+    title="Building Blocks for Dashboards",
+    description="Clean, modern building blocks for Reflex dashboards. Copy and paste into your apps. Open Source. Extensible.",
+    ctas=[
+        rx.el.a(
+            button("Create Your Own", size="sm"),
+            href="/create",
+        ),
+        rx.el.a(
+            button("View Components", variant="secondary", size="sm"),
+            href="/components",
+        ),
+    ],
+)
+def blocks_page():
+    return rx.el.div(
+        rx.el.div(
+            *[
+                button(
+                    item["name"],
+                    size="sm",
+                    on_click=selected_blocks_category.set_value(item["value"]),
+                    class_name="transition-none "
+                    + rx.cond(
+                        selected_blocks_category.value == item["value"],
+                        BUTTON_VARIANTS["variant"]["default"],
+                        BUTTON_VARIANTS["variant"]["outline"],
+                    ).to(str),
+                )
+                for item in BLOCKS
+            ],
+            class_name="w-full max-w-7xl mx-auto flex flex-row flex-wrap gap-4 items-center justify-center sm:justify-start p-7",
+        ),
+        block_card(func=bar_chart_01, label="bar")(),
+        block_card(func=bar_chart_02, label="bar")(),
+        block_card(func=bar_chart_03, label="bar")(),
+        block_card(func=bar_chart_04, label="bar")(),
+        block_card(func=line_chart_01, label="line")(),
+        block_card(func=line_chart_02, label="line")(),
+        block_card(func=line_chart_03, label="line")(),
+        block_card(func=line_chart_04, label="line")(),
+        block_card(func=area_chart_01, label="area")(),
+        block_card(func=area_chart_02, label="area")(),
+        block_card(func=kpi_card_01, label="kpi")(),
+        block_card(func=kpi_card_02, label="kpi")(),
+        class_name=" ".join(
+            [
+                "w-full max-w-7xl mx-auto px-0",
+                "divide-y divide-input/90",
+                "py-6 space-y-10",
+                "[&>*:first-child]:border-b-0",
+            ]
+        ),
+    )

app/pages/charts.py

@@ -32,12 +32,12 @@
     description="A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps.",
     ctas=[
         rx.el.a(
-            button("Chart Themes", size="sm"),
-            href="/create",
+            button("Browse Charts", size="sm"),
+            href="/docs/charts/area-chart",
         ),
         rx.el.a(
             button("Documentation", variant="secondary", size="sm"),
-            href="/docs/charts/area-chart",
+            href="/docs/components/chart",
         ),
     ],
 )

app/registry/components.py

@@ -169,4 +169,53 @@
         "files": ["components/ui/typography.py"],
         "dependencies": [],
     },
+    # --- UI Blocks ---
+    "bar_chart_01": {
+        "files": ["app/www/library/blocks/bar_chart_01.py"],
+        "dependencies": ["field", "checkbox", "card", "charts"],
+    },
+    "bar_chart_02": {
+        "files": ["app/www/library/blocks/bar_chart_02.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "bar_chart_03": {
+        "files": ["app/www/library/blocks/bar_chart_03.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "bar_chart_04": {
+        "files": ["app/www/library/blocks/bar_chart_04.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "line_chart_01": {
+        "files": ["app/www/library/blocks/line_chart_01.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "line_chart_02": {
+        "files": ["app/www/library/blocks/line_chart_02.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "line_chart_03": {
+        "files": ["app/www/library/blocks/line_chart_03.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "line_chart_04": {
+        "files": ["app/www/library/blocks/line_chart_04.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "area_chart_01": {
+        "files": ["app/www/library/blocks/area_chart_01.py"],
+        "dependencies": ["card", "charts"],
+    },
+    "area_chart_02": {
+        "files": ["app/www/library/blocks/area_chart_02.py"],
+        "dependencies": ["frame", "charts"],
+    },
+    "kpi_card_01": {
+        "files": ["app/www/library/blocks/kpi_card_01.py"],
+        "dependencies": ["frame"],
+    },
+    "kpi_card_02": {
+        "files": ["app/www/library/blocks/kpi_card_02.py"],
+        "dependencies": ["frame"],
+    },
 }

app/templates/navbar.py

@@ -12,6 +12,7 @@
     {"name": "Home", "path": "/"},
     {"name": "Docs", "path": "/docs/getting-started/introduction"},
     {"name": "Components", "path": "/components"},
+    {"name": "Blocks", "path": "/blocks"},
     {"name": "Charts", "path": "/charts"},
     {"name": "Create", "path": "/create"},
 ]
@@ -87,6 +88,8 @@ def site_github() -> rx.Component:
             label="GitHub",
         ),
         href="https://github.com/LineIndent/ui",
+        target="_blank",
+        rel="noopener noreferrer",
         class_name="no-underline",
     )
 
@@ -98,10 +101,7 @@ def navbar(with_create_page_cta: bool = False) -> rx.Component:
         separator(),
         site_github(),
         separator(),
-        rx.el.a(
-            button(hi("PlusSignIcon", class_name="size-4"), "New", size="sm"),
-            href="/create",
-        ),
+        rx.el.a(button("New Project", size="sm"), href="/create"),
     ]
 
     if with_create_page_cta: