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

apps/v4/components/docs-base-switcher.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link"
+import { cn } from "cn"
+
+import { source } from "@/lib/source"
+import { BASES } from "@/registry/bases"
+
+export function DocsBaseSwitcher({
+  base,
+  component,
+  hrefPrefix = "/docs/components",
+  className,
+}: {
+  base: string
+  component: string
+  hrefPrefix?: string
+  className?: string
+}) {
+  const activeBase = BASES.find((baseItem) => base === baseItem.name)
+
+  return (
+    <div
+      className={cn(
+        "not-typeset inline-flex w-full items-center gap-6",
+        className
+      )}
+    >
+      {BASES.filter((baseItem) =>
+        source.getPage([`components/${baseItem.name}/${component}`])
+      ).map((baseItem) => (
+        <Link
+          key={baseItem.name}
+          href={`${hrefPrefix}/${baseItem.name}/${component}`}
+          data-active={base === baseItem.name}
+          className="relative inline-flex items-center justify-center gap-1 pt-1 pb-0.5 text-base font-medium text-muted-foreground transition-colors after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity hover:text-foreground data-[active=true]:text-foreground data-[active=true]:after:opacity-100"
+        >
+          {baseItem.title}
+        </Link>
+      ))}
+      {activeBase?.meta?.logo && (
+        <div
+          className="ml-auto size-4 shrink-0 text-muted-foreground opacity-80 [&_svg]:size-4"
+          dangerouslySetInnerHTML={{
+            __html: activeBase.meta.logo,
+          }}
+        />
+      )}
+    </div>
+  )
+}