From 4d82b4a84ae8f43d7df5945bc88c2b9040371f8a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 07:58:02 +0000
Subject: [PATCH] feat(ui): migrate api-reference section to shadcn

- APIReferenceView: @tremor TabGroup/Tab/Text/Grid \u2192 shadcn Tabs +
  plain Tailwind layout. Replace tremor-content-strong with semantic
  foreground tokens.
- CodeBlock: replace bg-gray-100/border-gray-200/text-gray-600 with
  bg-muted/border-border/text-muted-foreground. Syntax-highlighter inline
  customStyle preserved (it owns the editor surface and isn't theme-aware).
- DocLink: replace border-zinc-200/bg-white/text-zinc-700/ring-blue-500
  with semantic tokens (border-border/bg-background/text-foreground/
  ring-ring). Use cn() from @/lib/utils.

Gates: TS \u2713 | Lint \u2713 | Vitest 3/3 \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../api-reference/APIReferenceView.tsx        | 89 +++++++++----------
 .../api-reference/components/CodeBlock.tsx    |  4 +-
 .../api-reference/components/DocLink.tsx      |  9 +-
 3 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/api-reference/APIReferenceView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/APIReferenceView.tsx
index 5861cc87e5b..35d3f117bd4 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/api-reference/APIReferenceView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/APIReferenceView.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Text, Tab, TabGroup, TabList, TabPanel, TabPanels, Grid } from "@tremor/react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import CodeBlock from "./components/CodeBlock";
 import DocLink from "@/app/(dashboard)/api-reference/components/DocLink";
 
@@ -21,33 +21,34 @@ const APIReferenceView: React.FC<ApiRefProps> = ({ proxySettings }) => {
   }
 
   return (
-    <>
-      <Grid className="gap-2 p-8 h-[80vh] w-full mt-2">
-        <div className="mb-5">
-          {/* Header row with Docs link on the right */}
-          <div className="flex items-center justify-between">
-            <p className="text-2xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">
-              OpenAI Compatible Proxy: API Reference
-            </p>
-            <DocLink className="ml-3 shrink-0" href="https://docs.litellm.ai/docs/proxy/user_keys" />
-          </div>
+    <div className="gap-2 p-8 h-[80vh] w-full mt-2">
+      <div className="mb-5">
+        <div className="flex items-center justify-between">
+          <p className="text-2xl text-foreground font-semibold">
+            OpenAI Compatible Proxy: API Reference
+          </p>
+          <DocLink
+            className="ml-3 shrink-0"
+            href="https://docs.litellm.ai/docs/proxy/user_keys"
+          />
+        </div>
 
-          <Text className="mt-2 mb-2">
-            LiteLLM is OpenAI Compatible. This means your API Key works with the OpenAI SDK. Just replace the base_url
-            to point to your litellm proxy. Example Below{" "}
-          </Text>
+        <p className="mt-2 mb-2 text-sm text-muted-foreground">
+          LiteLLM is OpenAI Compatible. This means your API Key works with the
+          OpenAI SDK. Just replace the base_url to point to your litellm proxy.
+          Example Below
+        </p>
 
-          <TabGroup>
-            <TabList>
-              <Tab>OpenAI Python SDK</Tab>
-              <Tab>LlamaIndex</Tab>
-              <Tab>Langchain Py</Tab>
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <CodeBlock
-                  language="python"
-                  code={`import openai
+        <Tabs defaultValue="openai">
+          <TabsList>
+            <TabsTrigger value="openai">OpenAI Python SDK</TabsTrigger>
+            <TabsTrigger value="llamaindex">LlamaIndex</TabsTrigger>
+            <TabsTrigger value="langchain">Langchain Py</TabsTrigger>
+          </TabsList>
+          <TabsContent value="openai">
+            <CodeBlock
+              language="python"
+              code={`import openai
 client = openai.OpenAI(
     api_key="your_api_key",
     base_url="${base_url}" # LiteLLM Proxy is OpenAI compatible, Read More: https://docs.litellm.ai/docs/proxy/user_keys
@@ -64,13 +65,13 @@ response = client.chat.completions.create(
 )
 
 print(response)`}
-                />
-              </TabPanel>
+            />
+          </TabsContent>
 
-              <TabPanel>
-                <CodeBlock
-                  language="python"
-                  code={`import os, dotenv
+          <TabsContent value="llamaindex">
+            <CodeBlock
+              language="python"
+              code={`import os, dotenv
 
 from llama_index.llms import AzureOpenAI
 from llama_index.embeddings import AzureOpenAIEmbedding
@@ -98,13 +99,13 @@ index = VectorStoreIndex.from_documents(documents, service_context=service_conte
 query_engine = index.as_query_engine()
 response = query_engine.query("What did the author do growing up?")
 print(response)`}
-                />
-              </TabPanel>
+            />
+          </TabsContent>
 
-              <TabPanel>
-                <CodeBlock
-                  language="python"
-                  code={`from langchain.chat_models import ChatOpenAI
+          <TabsContent value="langchain">
+            <CodeBlock
+              language="python"
+              code={`from langchain.chat_models import ChatOpenAI
 from langchain.prompts.chat import (
     ChatPromptTemplate,
     HumanMessagePromptTemplate,
@@ -129,13 +130,11 @@ messages = [
 response = chat(messages)
 
 print(response)`}
-                />
-              </TabPanel>
-            </TabPanels>
-          </TabGroup>
-        </div>
-      </Grid>
-    </>
+            />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/CodeBlock.tsx b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/CodeBlock.tsx
index 8d2fa8acb5d..02c3d622888 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/CodeBlock.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/CodeBlock.tsx
@@ -17,10 +17,10 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
   };
 
   return (
-    <div className="relative rounded-lg border border-gray-200 overflow-hidden">
+    <div className="relative rounded-lg border border-border overflow-hidden">
       <button
         onClick={copyToClipboard}
-        className="absolute top-3 right-3 p-2 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-600 z-10"
+        className="absolute top-3 right-3 p-2 rounded-md bg-muted hover:bg-muted/80 text-muted-foreground z-10"
         aria-label="Copy code"
       >
         {copied ? <CheckIcon size={16} /> : <ClipboardIcon size={16} />}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/DocLink.tsx b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/DocLink.tsx
index a3d0416053e..6fb317537cd 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/DocLink.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/components/DocLink.tsx
@@ -1,9 +1,6 @@
 import React from "react";
 import { ExternalLink } from "lucide-react";
-
-function cn(...parts: Array<string | undefined>) {
-  return parts.filter(Boolean).join(" ");
-}
+import { cn } from "@/lib/utils";
 
 export type DocLinkProps = {
   href?: string;
@@ -18,8 +15,8 @@ const DocLink = ({ href, className }: DocLinkProps) => {
       rel="noopener noreferrer"
       title="Open documentation in a new tab"
       className={cn(
-        "inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white/80 px-3.5 py-2 text-sm font-medium text-zinc-700 shadow-sm",
-        "hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 active:translate-y-[0.5px]",
+        "inline-flex items-center gap-2 rounded-xl border border-border bg-background/80 px-3.5 py-2 text-sm font-medium text-foreground shadow-sm",
+        "hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:translate-y-[0.5px]",
         className,
       )}
     >