snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/components/components-list.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link"
+
+import { PAGES_NEW } from "@/lib/docs"
+import {
+  getPagesFromFolder,
+  type PageTreeFolder,
+  type PageTreePage,
+} from "@/lib/page-tree"
+
+function ComponentLink({
+  component,
+  showNewIndicator,
+}: {
+  component: PageTreePage
+  showNewIndicator: boolean
+}) {
+  const isNew = showNewIndicator && PAGES_NEW.includes(component.url)
+
+  return (
+    <Link
+      href={component.url}
+      className="inline-flex items-center gap-2 text-lg font-medium underline-offset-4 hover:underline md:text-base"
+    >
+      {component.name}
+      {isNew && (
+        <>
+          <span className="sr-only">New</span>
+          <span
+            aria-hidden="true"
+            className="flex size-2 rounded-full bg-blue-500"
+          />
+        </>
+      )}
+    </Link>
+  )
+}
+
+export function ComponentsList({
+  componentsFolder,
+  currentBase,
+  variant = "all",
+}: {
+  componentsFolder: PageTreeFolder
+  currentBase: string
+  variant?: "all" | "new"
+}) {
+  const list = getPagesFromFolder(componentsFolder, currentBase).filter(
+    (component) => variant === "all" || PAGES_NEW.includes(component.url)
+  )
+
+  if (!list.length) {
+    return null
+  }
+
+  return (
+    <div
+      data-not-typeset
+      className="mt-8 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20"
+    >
+      {list.map((component) => (
+        <ComponentLink
+          key={component.$id}
+          component={component}
+          showNewIndicator={variant === "all"}
+        />
+      ))}
+    </div>
+  )
+}