From 2aefbb41298af6aca50dc25a334c1dafdac86587 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 24 Apr 2026 13:40:32 +0000
Subject: [PATCH] feat(ui): migrate vector_store_management and
 RouterSettingsAccordion tremor tabs to shadcn

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../RouterSettingsAccordion.tsx               | 56 +++++++-------
 .../vector_store_management/index.tsx         | 73 +++++++++----------
 2 files changed, 65 insertions(+), 64 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx
index e289573a14a..a521ba3ae84 100644
--- a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx
@@ -1,6 +1,10 @@
 import React, { useEffect, useState, useImperativeHandle, forwardRef, useRef } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { TabPanel, TabPanels, TabGroup, TabList, Tab } from "@tremor/react";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
 import { getRouterSettingsCall } from "../networking";
 import RouterSettingsForm, { RouterSettingsFormValue } from "../router_settings/RouterSettingsForm";
 import { Fallbacks } from "../Settings/RouterSettings/Fallbacks/AddFallbacks";
@@ -343,31 +347,29 @@ const RouterSettingsAccordion = forwardRef<RouterSettingsAccordionRef, RouterSet
 
     return (
       <div className="w-full">
-        <TabGroup className="w-full">
-          <TabList variant="line" defaultValue="1" className="px-8 pt-4">
-            <Tab value="1">Loadbalancing</Tab>
-            <Tab value="2">Fallbacks</Tab>
-          </TabList>
-          <TabPanels className="px-8 py-6">
-            <TabPanel>
-              <RouterSettingsForm
-                value={formValue}
-                onChange={setFormValue}
-                routerFieldsMetadata={routerFieldsMetadata}
-                availableRoutingStrategies={availableRoutingStrategies}
-                routingStrategyDescriptions={routingStrategyDescriptions}
-              />
-            </TabPanel>
-            <TabPanel>
-              <FallbackSelectionForm
-                groups={fallbackGroups}
-                onGroupsChange={handleFallbackGroupsChange}
-                availableModels={availableModels}
-                maxGroups={5}
-              />
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
+        <Tabs defaultValue="loadbalancing" className="w-full">
+          <TabsList className="px-8 pt-4 bg-transparent p-0 h-auto">
+            <TabsTrigger value="loadbalancing">Loadbalancing</TabsTrigger>
+            <TabsTrigger value="fallbacks">Fallbacks</TabsTrigger>
+          </TabsList>
+          <TabsContent value="loadbalancing" className="px-8 py-6">
+            <RouterSettingsForm
+              value={formValue}
+              onChange={setFormValue}
+              routerFieldsMetadata={routerFieldsMetadata}
+              availableRoutingStrategies={availableRoutingStrategies}
+              routingStrategyDescriptions={routingStrategyDescriptions}
+            />
+          </TabsContent>
+          <TabsContent value="fallbacks" className="px-8 py-6">
+            <FallbackSelectionForm
+              groups={fallbackGroups}
+              onGroupsChange={handleFallbackGroupsChange}
+              availableModels={availableModels}
+              maxGroups={5}
+            />
+          </TabsContent>
+        </Tabs>
       </div>
     );
   });
diff --git a/ui/litellm-dashboard/src/components/vector_store_management/index.tsx b/ui/litellm-dashboard/src/components/vector_store_management/index.tsx
index 74af0a6c365..dcc52415ebf 100644
--- a/ui/litellm-dashboard/src/components/vector_store_management/index.tsx
+++ b/ui/litellm-dashboard/src/components/vector_store_management/index.tsx
@@ -1,8 +1,12 @@
 import React, { useCallback, useState, useEffect } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
 import { RefreshCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
 import {
   vectorStoreListCall,
   vectorStoreDeleteCall,
@@ -157,46 +161,41 @@ const VectorStoreManagement: React.FC<VectorStoreProps> = ({ accessToken, userID
           You can use vector stores to store and retrieve LLM embeddings.
         </p>
 
-        <TabGroup>
-          <TabList className="mb-6">
-            <Tab>Create Vector Store</Tab>
-            <Tab>Manage Vector Stores</Tab>
-            <Tab>Test Vector Store</Tab>
-          </TabList>
+        <Tabs defaultValue="create">
+          <TabsList className="mb-6">
+            <TabsTrigger value="create">Create Vector Store</TabsTrigger>
+            <TabsTrigger value="manage">Manage Vector Stores</TabsTrigger>
+            <TabsTrigger value="test">Test Vector Store</TabsTrigger>
+          </TabsList>
 
-          <TabPanels>
-            {/* Tab 1: Create Vector Store */}
-            <TabPanel>
-              <CreateVectorStore accessToken={accessToken} onSuccess={handleVectorStoreCreated} />
-            </TabPanel>
+          <TabsContent value="create">
+            <CreateVectorStore accessToken={accessToken} onSuccess={handleVectorStoreCreated} />
+          </TabsContent>
 
-            {/* Tab 2: Manage Vector Stores */}
-            <TabPanel>
-              <Button
-                className="mb-4"
-                onClick={() => setIsCreateModalVisible(true)}
-              >
-                + Add Vector Store
-              </Button>
+          <TabsContent value="manage">
+            <Button
+              className="mb-4"
+              onClick={() => setIsCreateModalVisible(true)}
+            >
+              + Add Vector Store
+            </Button>
 
-              <div className="grid grid-cols-1 gap-2 pt-2 pb-2 w-full mt-2">
-                <div className="col-span-1">
-                  <VectorStoreTable
-                    data={vectorStores}
-                    onView={handleView}
-                    onEdit={handleEdit}
-                    onDelete={handleDelete}
-                  />
-                </div>
+            <div className="grid grid-cols-1 gap-2 pt-2 pb-2 w-full mt-2">
+              <div className="col-span-1">
+                <VectorStoreTable
+                  data={vectorStores}
+                  onView={handleView}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                />
               </div>
-            </TabPanel>
+            </div>
+          </TabsContent>
 
-            {/* Tab 3: Test Vector Store */}
-            <TabPanel>
-              <TestVectorStoreTab accessToken={accessToken} vectorStores={vectorStores} />
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
+          <TabsContent value="test">
+            <TestVectorStoreTab accessToken={accessToken} vectorStores={vectorStores} />
+          </TabsContent>
+        </Tabs>
 
         {/* Create Vector Store Modal */}
         <VectorStoreForm