new: utilities

app/templates/docsidebar.py

@@ -20,6 +20,7 @@ class SidebarSection:
 SIDEBAR_SECTIONS = [
     SidebarSection(title="Getting Started", routes=routes.GET_STARTED_URLS),
     SidebarSection(title="Resources", routes=routes.RESOURCES_URLS),
+    SidebarSection(title="Utilities", routes=routes.UTILITIES),
     SidebarSection(title="Charts", routes=routes.CHARTS_URLS),
     SidebarSection(title="Components", routes=routes.BASE_UI_COMPONENTS),
 ]

app/utils/routes.py

@@ -65,6 +65,7 @@ def generate_doc_routes(section_folder, base_path) -> list[dict]:
         "",
         [{"title": "llms.txt", "url": "llms.txt", "order": "5"}],
     ),
+    ("utilities", "docs/utilities/", "title", []),
     ("resources", "docs/resources/", "title", []),
     ("components", "docs/components/", "title", []),
     ("charts", "docs/charts/", "title", []),
@@ -90,7 +91,7 @@ def build_all_routes():
 RESOURCES_URLS = ALL_ROUTES["resources"]
 BASE_UI_COMPONENTS = ALL_ROUTES["components"]
 CHARTS_URLS = ALL_ROUTES["charts"]
-
+UTILITIES = ALL_ROUTES["utilities"]
 
 if __name__ == "__main__":
     print(ALL_ROUTES)

app/www/library/utilities/scroll_fade_demo.py

@@ -0,0 +1,20 @@
+import reflex as rx
+
+
+def scroll_fade_demo():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.div(
+                *[
+                    rx.el.div(
+                        f"Item {index + 1}",
+                        class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
+                    )
+                    for index in range(12)
+                ],
+                class_name="flex flex-col gap-1.5 p-1.5",
+            ),
+            class_name="h-72 scroll-fade scrollbar-none overflow-y-auto",
+        ),
+        class_name="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border border-input",
+    )

app/www/library/utilities/scroll_fade_disabled.py

@@ -0,0 +1,48 @@
+import reflex as rx
+
+
+def scroll_fade_none_items():
+    return rx.el.div(
+        *[
+            rx.el.div(
+                f"Item {index + 1}",
+                class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
+            )
+            for index in range(8)
+        ],
+        class_name="flex flex-col gap-1.5 p-1.5",
+    )
+
+
+def scroll_fade_none():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_none_items(),
+                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_none_items(),
+                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto scroll-fade-none",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade scroll-fade-none",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        class_name="mx-auto flex w-full max-w-xs min-w-0 flex-col gap-6",
+    )

app/www/library/utilities/scroll_fade_edges.py

@@ -0,0 +1,109 @@
+import reflex as rx
+
+items = [
+    "Inbox triage",
+    "Design review",
+    "API contract",
+    "QA pass",
+    "Launch notes",
+    "Metrics follow-up",
+]
+
+tags = [
+    "Design",
+    "Engineering",
+    "Marketing",
+    "Product",
+    "Research",
+    "Sales",
+    "Support",
+    "Operations",
+]
+
+
+def scroll_fade_edge_items():
+    return rx.el.div(
+        *[
+            rx.el.div(
+                item,
+                class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
+            )
+            for item in items
+        ],
+        class_name="flex flex-col gap-1.5 p-1.5",
+    )
+
+
+def scroll_fade_edge_tags():
+    return rx.el.div(
+        *[
+            rx.el.div(
+                tag,
+                class_name="shrink-0 rounded-xl bg-muted px-4 py-2.5 text-sm",
+            )
+            for tag in tags
+        ],
+        class_name="flex w-max gap-1.5 p-1.5",
+    )
+
+
+def scroll_fade_edge():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_edge_items(),
+                    class_name="h-36 scroll-fade-t scrollbar-none overflow-y-auto",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade-t",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_edge_items(),
+                    class_name="h-36 scroll-fade-b scrollbar-none overflow-y-auto",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade-b",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_edge_tags(),
+                    class_name="scroll-fade-s scrollbar-none overflow-x-auto",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade-s",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_edge_tags(),
+                    class_name="scroll-fade-e scrollbar-none overflow-x-auto",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade-e",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        class_name="mx-auto flex max-w-xs min-w-0 flex-col gap-6",
+    )

app/www/library/utilities/scroll_fade_horizontal.py

@@ -0,0 +1,35 @@
+import reflex as rx
+
+tags = [
+    "Design",
+    "Engineering",
+    "Marketing",
+    "Product",
+    "Research",
+    "Sales",
+    "Support",
+    "Operations",
+    "Finance",
+    "Legal",
+    "People",
+    "Security",
+]
+
+
+def scroll_fade_horizontal():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.div(
+                *[
+                    rx.el.div(
+                        tag,
+                        class_name="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm",
+                    )
+                    for tag in tags
+                ],
+                class_name="flex w-max gap-1.5 p-1.5",
+            ),
+            class_name="scroll-fade-x scrollbar-none overflow-x-auto",
+        ),
+        class_name="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border border-input",
+    )

app/www/library/utilities/scroll_fade_no_fade.py

@@ -0,0 +1,20 @@
+import reflex as rx
+
+
+def scroll_fade_no_fade():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.div(
+                *[
+                    rx.el.div(
+                        f"Item {index + 1}",
+                        class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
+                    )
+                    for index in range(3)
+                ],
+                class_name="flex flex-col gap-1.5 p-1.5",
+            ),
+            class_name="scroll-fade scrollbar-none overflow-y-auto",
+        ),
+        class_name="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border border-input",
+    )

app/www/library/utilities/scroll_fade_size.py

@@ -0,0 +1,48 @@
+import reflex as rx
+
+
+def scroll_fade_size_items():
+    return rx.el.div(
+        *[
+            rx.el.div(
+                f"Item {index + 1}",
+                class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
+            )
+            for index in range(8)
+        ],
+        class_name="flex flex-col gap-1.5 p-1.5",
+    )
+
+
+def scroll_fade_size():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_size_items(),
+                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto scroll-fade-4",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade-4",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    scroll_fade_size_items(),
+                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto scroll-fade-24",
+                ),
+                class_name="overflow-hidden rounded-2xl border border-input",
+            ),
+            rx.el.p(
+                "scroll-fade-24",
+                class_name="text-center font-mono text-xs text-muted-foreground",
+            ),
+            class_name="flex flex-col gap-3",
+        ),
+        class_name="mx-auto flex w-full max-w-xs flex-col gap-6",
+    )

app/www/library/utilities/shimmer_angle.py

@@ -0,0 +1,17 @@
+import reflex as rx
+
+
+def shimmer_angle():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.p("Generating response...", class_name="shimmer"),
+            rx.el.p("shimmer", class_name="font-mono text-xs"),
+            class_name="flex flex-col gap-3",
+        ),
+        rx.el.div(
+            rx.el.p("Generating response...", class_name="shimmer shimmer-angle-45"),
+            rx.el.p("shimmer-angle-45", class_name="font-mono text-xs"),
+            class_name="flex flex-col gap-3",
+        ),
+        class_name="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2",
+    )

app/www/library/utilities/shimmer_color.py

@@ -0,0 +1,13 @@
+import reflex as rx
+
+
+def shimmer_color():
+    return rx.el.div(
+        rx.el.p(
+            "Generating response", class_name="shimmer shimmer-color-blue-500/60 w-fit"
+        ),
+        rx.el.p(
+            "Generating response", class_name="shimmer shimmer-color-[#378ADD] w-fit"
+        ),
+        class_name="flex flex-col items-center gap-2 text-sm text-muted-foreground",
+    )

app/www/library/utilities/shimmer_duration.py

@@ -0,0 +1,19 @@
+import reflex as rx
+
+
+def shimmer_duration():
+    return rx.el.div(
+        rx.el.div(
+            rx.el.p("Generating response...", class_name="shimmer"),
+            rx.el.p("shimmer", class_name="font-mono text-xs"),
+            class_name="flex flex-col gap-3",
+        ),
+        rx.el.div(
+            rx.el.p(
+                "Generating response...", class_name="shimmer shimmer-duration-1000"
+            ),
+            rx.el.p("shimmer-duration-1000", class_name="font-mono text-xs"),
+            class_name="flex flex-col gap-3",
+        ),
+        class_name="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2",
+    )

app/www/library/utilities/shimmer_none.py

@@ -0,0 +1,9 @@
+import reflex as rx
+
+
+def shimmer_none():
+    return rx.el.div(
+        rx.el.p("Generating response...", class_name="shimmer md:shimmer-none"),
+        rx.el.p("shimmer md:shimmer-none", class_name="font-mono text-xs"),
+        class_name="flex flex-col items-center gap-3 text-sm text-muted-foreground",
+    )