From 3f55d8d01b406484c2953fe0482b491298d1516f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 24 Apr 2026 13:32:15 +0000
Subject: [PATCH] feat(ui): migrate tremor pure-table files to shadcn table

Batch migration of files that only use Tremor for the Table family
(Table/TableHead/TableHeaderCell/TableBody/TableRow/TableCell).
Renames per shadcn: TableHead (thead wrapper) -> TableHeader, and
TableHeaderCell (th) -> TableHead. Updates related test mocks and
replaces the tremor Icon-based expand/collapse stub in ModelsCell.tsx
with semantic Expand/Collapse aria-labels.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../components/TeamsTable/ModelsCell.test.tsx | 23 +++-------
 .../components/TeamsTable/ModelsCell.tsx      |  3 +-
 .../components/TeamsTable/TeamsTable.test.tsx |  6 +--
 .../components/TeamsTable/TeamsTable.tsx      | 27 ++++++-----
 .../YourRoleCell/YourRoleCell.test.tsx        |  2 +-
 .../TeamsTable/YourRoleCell/YourRoleCell.tsx  |  3 +-
 .../AIHub/UsefulLinksManagement.tsx           | 15 +++---
 .../DeletedKeysTable/DeletedKeysTable.tsx     | 13 +++---
 .../DeletedTeamsTable/DeletedTeamsTable.tsx   | 13 +++---
 .../src/components/ToolPolicies.tsx           | 46 +++++++++++--------
 .../src/components/agents/agent_table.tsx     | 13 +++---
 .../claude_code_plugins/plugin_table.tsx      | 13 +++---
 .../common_components/ModelAliasManager.tsx   | 19 ++++----
 .../components/guardrails/guardrail_table.tsx | 13 +++---
 .../molecules/models/columns.test.tsx         | 17 +++++--
 .../src/components/organizations.tsx          | 27 ++++++-----
 .../components/policies/attachment_table.tsx  | 13 +++---
 .../src/components/policies/policy_table.tsx  | 13 +++---
 .../src/components/prompts/prompt_table.tsx   | 13 +++---
 .../src/components/team/available_teams.tsx   | 19 ++++----
 .../VectorStoreTable.test.tsx                 |  8 ++--
 .../VectorStoreTable.tsx                      | 13 +++---
 22 files changed, 160 insertions(+), 172 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.test.tsx
index 2b487d65322..1e383d0af40 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.test.tsx
@@ -4,17 +4,8 @@ import { describe, expect, it, vi } from "vitest";
 import { Team } from "@/components/key_team_helpers/key_list";
 import ModelsCell from "./ModelsCell";
 
-// The Icon component from @tremor/react does not forward onClick to the rendered element
-// by default in the test environment, so we stub it with a clickable button so accordion
-// interaction can be tested end-to-end.
-vi.mock("@tremor/react", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@tremor/react")>();
-  return {
-    ...actual,
-    Icon: ({ onClick, "aria-label": ariaLabel }: { onClick?: () => void; "aria-label"?: string }) =>
-      React.createElement("button", { onClick, "aria-label": ariaLabel ?? "accordion-toggle", type: "button" }),
-  };
-});
+// The component now uses a native <button> with lucide icons for the
+// expand/collapse toggle, so no Tremor mock is needed.
 
 const makeTeam = (models: string[], overrides: Partial<Team> = {}): Team => ({
   team_id: "team-1",
@@ -63,7 +54,7 @@ describe("ModelsCell", () => {
     expect(screen.getByText("gpt-4")).toBeInTheDocument();
     expect(screen.getByText("gpt-3.5-turbo")).toBeInTheDocument();
     expect(screen.getByText("claude-3")).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: /accordion/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /(Expand|Collapse)/ })).not.toBeInTheDocument();
   });
 
   it("should truncate model names longer than 30 characters with an ellipsis", () => {
@@ -95,14 +86,14 @@ describe("ModelsCell", () => {
   it("should show the accordion toggle button when there are more than 3 models", () => {
     renderModelsCell(makeTeam(["m1", "m2", "m3", "m4"]));
 
-    expect(screen.getByRole("button", { name: /accordion/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /(Expand|Collapse)/ })).toBeInTheDocument();
   });
 
   it("should expand to show all models when the accordion toggle is clicked", () => {
     renderModelsCell(makeTeam(["m1", "m2", "m3", "m4", "m5"]));
 
     act(() => {
-      screen.getByRole("button", { name: /accordion/i }).click();
+      screen.getByRole("button", { name: /(Expand|Collapse)/ }).click();
     });
 
     expect(screen.getByText("m4")).toBeInTheDocument();
@@ -113,7 +104,7 @@ describe("ModelsCell", () => {
   it("should collapse back to show the overflow badge after a second click on the toggle", () => {
     renderModelsCell(makeTeam(["m1", "m2", "m3", "m4", "m5"]));
 
-    const toggle = screen.getByRole("button", { name: /accordion/i });
+    const toggle = screen.getByRole("button", { name: /(Expand|Collapse)/ });
     act(() => {
       toggle.click();
     });
@@ -133,6 +124,6 @@ describe("ModelsCell", () => {
     expect(screen.queryByText("m1")).not.toBeInTheDocument();
     expect(screen.queryByText("m2")).not.toBeInTheDocument();
     expect(screen.queryByText("m3")).not.toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: /accordion/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /(Expand|Collapse)/ })).not.toBeInTheDocument();
   });
 });
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.tsx
index 11c8ed7c4d8..41b2ed75ecb 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.tsx
@@ -1,6 +1,5 @@
 import { Badge } from "@/components/ui/badge";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { TableCell } from "@tremor/react";
+import { TableCell } from "@/components/ui/table";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.test.tsx
index ed4e6f7e4cc..88c8bc37e1f 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.test.tsx
@@ -5,12 +5,12 @@ import { describe, expect, it, vi } from "vitest";
 import { Team } from "@/components/key_team_helpers/key_list";
 import TeamsTable from "./TeamsTable";
 
-vi.mock("@tremor/react", () => ({
+vi.mock("@/components/ui/table", () => ({
   Table: ({ children }: any) => <table>{children}</table>,
-  TableHead: ({ children }: any) => <thead>{children}</thead>,
+  TableHeader: ({ children }: any) => <thead>{children}</thead>,
   TableBody: ({ children }: any) => <tbody>{children}</tbody>,
   TableRow: ({ children }: any) => <tr>{children}</tr>,
-  TableHeaderCell: ({ children }: any) => <th>{children}</th>,
+  TableHead: ({ children }: any) => <th>{children}</th>,
   TableCell: ({ children, ...props }: any) => <td {...props}>{children}</td>,
 }));
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
index d459ea56289..8c60ea7957d 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
@@ -1,12 +1,11 @@
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -57,19 +56,19 @@ const TeamsTable = ({
 }: TeamsTableProps) => {
   return (
     <Table>
-      <TableHead>
+      <TableHeader>
         <TableRow>
-          <TableHeaderCell>Team Name</TableHeaderCell>
-          <TableHeaderCell>Team ID</TableHeaderCell>
-          <TableHeaderCell>Created</TableHeaderCell>
-          <TableHeaderCell>Spend (USD)</TableHeaderCell>
-          <TableHeaderCell>Budget (USD)</TableHeaderCell>
-          <TableHeaderCell>Models</TableHeaderCell>
-          <TableHeaderCell>Organization</TableHeaderCell>
-          <TableHeaderCell>Your Role</TableHeaderCell>
-          <TableHeaderCell>Info</TableHeaderCell>
+          <TableHead>Team Name</TableHead>
+          <TableHead>Team ID</TableHead>
+          <TableHead>Created</TableHead>
+          <TableHead>Spend (USD)</TableHead>
+          <TableHead>Budget (USD)</TableHead>
+          <TableHead>Models</TableHead>
+          <TableHead>Organization</TableHead>
+          <TableHead>Your Role</TableHead>
+          <TableHead>Info</TableHead>
         </TableRow>
-      </TableHead>
+      </TableHeader>
 
       <TableBody>
         {teams && teams.length > 0
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.test.tsx
index 20a4497159d..58f84d056cb 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.test.tsx
@@ -6,7 +6,7 @@ import type { Team } from "@/components/key_team_helpers/key_list";
 import YourRoleCell from "./YourRoleCell";
 
 // Lightweight mocks for stable, focused tests
-vi.mock("@tremor/react", () => ({
+vi.mock("@/components/ui/table", () => ({
   TableCell: ({ children }: { children: React.ReactNode }) => <div data-testid="cell">{children}</div>,
 }));
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx
index b3bd777cf89..d22da312d48 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx
@@ -1,5 +1,4 @@
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { TableCell } from "@tremor/react";
+import { TableCell } from "@/components/ui/table";
 import { Team } from "@/components/key_team_helpers/key_list";
 import TeamRoleBadge from "@/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge";
 
diff --git a/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx b/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx
index 900502f90d1..8912da033f1 100644
--- a/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx
@@ -7,15 +7,14 @@ import {
   ExternalLink as ExternalLinkIcon,
   Plus,
 } from "lucide-react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -373,13 +372,13 @@ const UsefulLinksManagement: React.FC<UsefulLinksManagementProps> = ({ accessTok
           <div className="rounded-lg custom-border relative">
             <div className="overflow-x-auto">
               <Table className="[&_td]:py-0.5 [&_th]:py-1">
-                <TableHead>
+                <TableHeader>
                   <TableRow>
-                    <TableHeaderCell className="py-1 h-8">Display Name</TableHeaderCell>
-                    <TableHeaderCell className="py-1 h-8">URL</TableHeaderCell>
-                    <TableHeaderCell className="py-1 h-8">Actions</TableHeaderCell>
+                    <TableHead className="py-1 h-8">Display Name</TableHead>
+                    <TableHead className="py-1 h-8">URL</TableHead>
+                    <TableHead className="py-1 h-8">Actions</TableHead>
                   </TableRow>
-                </TableHead>
+                </TableHeader>
                 <TableBody>
                   {links.map((link, index) => (
                     <TableRow key={link.id} className="h-8">
diff --git a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.tsx b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.tsx
index 341a288dd4e..f18ed063f0c 100644
--- a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.tsx
+++ b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.tsx
@@ -11,15 +11,14 @@ import {
   SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import {
   Tooltip,
   TooltipContent,
@@ -319,11 +318,11 @@ export function DeletedKeysTable({
           <div className="rounded-lg custom-border relative">
             <div className="overflow-x-auto">
               <Table className="[&_td]:py-0.5 [&_th]:py-1" style={{ width: table.getCenterTotalSize() }}>
-                <TableHead>
+                <TableHeader>
                   {table.getHeaderGroups().map((headerGroup) => (
                     <TableRow key={headerGroup.id}>
                       {headerGroup.headers.map((header) => (
-                        <TableHeaderCell
+                        <TableHead
                           key={header.id}
                           data-header-id={header.id}
                           className="py-1 h-8 relative hover:bg-muted"
@@ -385,11 +384,11 @@ export function DeletedKeysTable({
                               }}
                             />
                           </div>
-                        </TableHeaderCell>
+                        </TableHead>
                       ))}
                     </TableRow>
                   ))}
-                </TableHead>
+                </TableHeader>
                 <TableBody>
                   {isLoading || isFetching ? (
                     <TableRow>
diff --git a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx
index eb5ea686c2c..43c91003dc0 100644
--- a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx
+++ b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx
@@ -9,15 +9,14 @@ import {
   SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import {
   Tooltip,
@@ -275,11 +274,11 @@ export function DeletedTeamsTable({
           <div className="rounded-lg custom-border relative">
             <div className="overflow-x-auto">
               <Table className="[&_td]:py-0.5 [&_th]:py-1" style={{ width: table.getCenterTotalSize() }}>
-                <TableHead>
+                <TableHeader>
                   {table.getHeaderGroups().map((headerGroup) => (
                     <TableRow key={headerGroup.id}>
                       {headerGroup.headers.map((header) => (
-                        <TableHeaderCell
+                        <TableHead
                           key={header.id}
                           data-header-id={header.id}
                           className={cn("py-1 h-8 relative hover:bg-muted")}
@@ -341,11 +340,11 @@ export function DeletedTeamsTable({
                               }}
                             />
                           </div>
-                        </TableHeaderCell>
+                        </TableHead>
                       ))}
                     </TableRow>
                   ))}
-                </TableHead>
+                </TableHeader>
                 <TableBody>
                   {isLoading || isFetching ? (
                     <TableRow>
diff --git a/ui/litellm-dashboard/src/components/ToolPolicies.tsx b/ui/litellm-dashboard/src/components/ToolPolicies.tsx
index d2e1797df8b..be73e4f095a 100644
--- a/ui/litellm-dashboard/src/components/ToolPolicies.tsx
+++ b/ui/litellm-dashboard/src/components/ToolPolicies.tsx
@@ -8,8 +8,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell } from "@tremor/react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { TimeCell } from "./view_logs/time_cell";
 import type { SortState } from "./common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
 import { TableHeaderSortDropdown } from "./common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
@@ -448,33 +454,33 @@ export const ToolPolicies: React.FC<ToolPoliciesProps> = ({ accessToken, onSelec
         )}
 
         <Table className="[&_td]:py-0.5 [&_th]:py-1 w-full">
-          <TableHead>
+          <TableHeader>
             <TableRow>
-              <TableHeaderCell className="py-1 h-8">
+              <TableHead className="py-1 h-8">
                 <SortHeader label="Discovered" field="created_at" />
-              </TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">
+              </TableHead>
+              <TableHead className="py-1 h-8">
                 <SortHeader label="Tool Name" field="tool_name" />
-              </TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">
+              </TableHead>
+              <TableHead className="py-1 h-8">
                 <SortHeader label="Input Policy" field="input_policy" />
-              </TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">
+              </TableHead>
+              <TableHead className="py-1 h-8">
                 <SortHeader label="Output Policy" field="output_policy" />
-              </TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">
+              </TableHead>
+              <TableHead className="py-1 h-8">
                 <SortHeader label="# Calls" field="call_count" />
-              </TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">
+              </TableHead>
+              <TableHead className="py-1 h-8">
                 <SortHeader label="Team Name" field="team_id" />
-              </TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">Key Hash</TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">
+              </TableHead>
+              <TableHead className="py-1 h-8">Key Hash</TableHead>
+              <TableHead className="py-1 h-8">
                 <SortHeader label="Key Name" field="key_alias" />
-              </TableHeaderCell>
-              <TableHeaderCell className="py-1 h-8">User Agent</TableHeaderCell>
+              </TableHead>
+              <TableHead className="py-1 h-8">User Agent</TableHead>
             </TableRow>
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {loading ? (
               <TableRow>
diff --git a/ui/litellm-dashboard/src/components/agents/agent_table.tsx b/ui/litellm-dashboard/src/components/agents/agent_table.tsx
index 93717b5f031..ab9eb28eb0f 100644
--- a/ui/litellm-dashboard/src/components/agents/agent_table.tsx
+++ b/ui/litellm-dashboard/src/components/agents/agent_table.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -192,11 +191,11 @@ const AgentTable: React.FC<AgentTableProps> = ({
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
         <Table className="[&_td]:py-0.5 [&_th]:py-1">
-          <TableHead>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHeaderCell
+                  <TableHead
                     key={header.id}
                     className="py-1 h-8"
                     onClick={header.column.getToggleSortingHandler()}
@@ -225,11 +224,11 @@ const AgentTable: React.FC<AgentTableProps> = ({
                         )}
                       </div>
                     </div>
-                  </TableHeaderCell>
+                  </TableHead>
                 ))}
               </TableRow>
             ))}
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
diff --git a/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx b/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx
index cf4fe093e5d..742ff04723c 100644
--- a/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx
+++ b/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx
@@ -6,15 +6,14 @@ import {
   SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -268,11 +267,11 @@ const PluginTable: React.FC<PluginTableProps> = ({
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
         <Table className="[&_td]:py-0.5 [&_th]:py-1">
-          <TableHead>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHeaderCell
+                  <TableHead
                     key={header.id}
                     className={`py-1 h-8 ${
                       header.id === "actions"
@@ -311,11 +310,11 @@ const PluginTable: React.FC<PluginTableProps> = ({
                         </div>
                       )}
                     </div>
-                  </TableHeaderCell>
+                  </TableHead>
                 ))}
               </TableRow>
             ))}
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
diff --git a/ui/litellm-dashboard/src/components/common_components/ModelAliasManager.tsx b/ui/litellm-dashboard/src/components/common_components/ModelAliasManager.tsx
index 0b4a1f26653..7cb2567858e 100644
--- a/ui/litellm-dashboard/src/components/common_components/ModelAliasManager.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/ModelAliasManager.tsx
@@ -1,14 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Pencil, Plus, Trash2 } from "lucide-react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -205,17 +204,17 @@ const ModelAliasManager: React.FC<ModelAliasManagerProps> = ({
       <div className="rounded-lg custom-border relative mb-6">
         <div className="overflow-x-auto">
           <Table className="[&_td]:py-0.5 [&_th]:py-1">
-            <TableHead>
+            <TableHeader>
               <TableRow>
-                <TableHeaderCell className="py-1 h-8">
+                <TableHead className="py-1 h-8">
                   Alias Name
-                </TableHeaderCell>
-                <TableHeaderCell className="py-1 h-8">
+                </TableHead>
+                <TableHead className="py-1 h-8">
                   Target Model
-                </TableHeaderCell>
-                <TableHeaderCell className="py-1 h-8">Actions</TableHeaderCell>
+                </TableHead>
+                <TableHead className="py-1 h-8">Actions</TableHead>
               </TableRow>
-            </TableHead>
+            </TableHeader>
             <TableBody>
               {aliases.map((alias) => (
                 <TableRow key={alias.id} className="h-8">
diff --git a/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx b/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx
index 293d4e5985c..7149b0f67f2 100644
--- a/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -288,11 +287,11 @@ const GuardrailTable: React.FC<GuardrailTableProps> = ({
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
         <Table className="[&_td]:py-0.5 [&_th]:py-1">
-          <TableHead>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHeaderCell
+                  <TableHead
                     key={header.id}
                     className={`py-1 h-8 ${
                       header.id === "actions"
@@ -327,11 +326,11 @@ const GuardrailTable: React.FC<GuardrailTableProps> = ({
                         </div>
                       )}
                     </div>
-                  </TableHeaderCell>
+                  </TableHead>
                 ))}
               </TableRow>
             ))}
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
diff --git a/ui/litellm-dashboard/src/components/molecules/models/columns.test.tsx b/ui/litellm-dashboard/src/components/molecules/models/columns.test.tsx
index a6d503437ee..e744d0cc4cd 100644
--- a/ui/litellm-dashboard/src/components/molecules/models/columns.test.tsx
+++ b/ui/litellm-dashboard/src/components/molecules/models/columns.test.tsx
@@ -4,7 +4,14 @@ import { describe, expect, it, vi, beforeEach } from "vitest";
 import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table";
 import { columns } from "./columns";
 import { ModelData } from "../../model_dashboard/types";
-import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell } from "@tremor/react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import * as providerInfoHelpers from "../../provider_info_helpers";
 
 vi.mock("../../provider_info_helpers");
@@ -69,19 +76,19 @@ const TestTable = ({
 
   return (
     <Table>
-      <TableHead>
+      <TableHeader>
         {table.getHeaderGroups().map((headerGroup) => (
           <TableRow key={headerGroup.id}>
             {headerGroup.headers.map((header) => (
-              <TableHeaderCell key={header.id}>
+              <TableHead key={header.id}>
                 {header.isPlaceholder
                   ? null
                   : flexRender(header.column.columnDef.header, header.getContext())}
-              </TableHeaderCell>
+              </TableHead>
             ))}
           </TableRow>
         ))}
-      </TableHead>
+      </TableHeader>
       <TableBody>
         {table.getRowModel().rows.map((row) => (
           <TableRow key={row.id}>
diff --git a/ui/litellm-dashboard/src/components/organizations.tsx b/ui/litellm-dashboard/src/components/organizations.tsx
index ddf6fe15e44..1a751511f28 100644
--- a/ui/litellm-dashboard/src/components/organizations.tsx
+++ b/ui/litellm-dashboard/src/components/organizations.tsx
@@ -5,15 +5,14 @@ import {
   ChevronRight as ChevronRightIcon,
   RefreshCcw as RefreshIcon,
 } from "lucide-react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -324,19 +323,19 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
                         </div>
                       </div>
                       <Table>
-                        <TableHead>
+                        <TableHeader>
                           <TableRow>
-                            <TableHeaderCell>Organization ID</TableHeaderCell>
-                            <TableHeaderCell>Organization Name</TableHeaderCell>
-                            <TableHeaderCell>Created</TableHeaderCell>
-                            <TableHeaderCell>Spend (USD)</TableHeaderCell>
-                            <TableHeaderCell>Budget (USD)</TableHeaderCell>
-                            <TableHeaderCell>Models</TableHeaderCell>
-                            <TableHeaderCell>TPM / RPM Limits</TableHeaderCell>
-                            <TableHeaderCell>Info</TableHeaderCell>
-                            <TableHeaderCell>Actions</TableHeaderCell>
+                            <TableHead>Organization ID</TableHead>
+                            <TableHead>Organization Name</TableHead>
+                            <TableHead>Created</TableHead>
+                            <TableHead>Spend (USD)</TableHead>
+                            <TableHead>Budget (USD)</TableHead>
+                            <TableHead>Models</TableHead>
+                            <TableHead>TPM / RPM Limits</TableHead>
+                            <TableHead>Info</TableHead>
+                            <TableHead>Actions</TableHead>
                           </TableRow>
-                        </TableHead>
+                        </TableHeader>
 
                         <TableBody>
                           {organizations && organizations.length > 0
diff --git a/ui/litellm-dashboard/src/components/policies/attachment_table.tsx b/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
index eead89c0e9c..72d288e669e 100644
--- a/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
+++ b/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -238,11 +237,11 @@ const AttachmentTable: React.FC<AttachmentTableProps> = ({
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
         <Table className="[&_td]:py-0.5 [&_th]:py-1">
-          <TableHead>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHeaderCell
+                  <TableHead
                     key={header.id}
                     className={`py-1 h-8 ${
                       header.id === "actions"
@@ -277,11 +276,11 @@ const AttachmentTable: React.FC<AttachmentTableProps> = ({
                         </div>
                       )}
                     </div>
-                  </TableHeaderCell>
+                  </TableHead>
                 ))}
               </TableRow>
             ))}
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
diff --git a/ui/litellm-dashboard/src/components/policies/policy_table.tsx b/ui/litellm-dashboard/src/components/policies/policy_table.tsx
index 8d5c47d4f2b..a48b94353ce 100644
--- a/ui/litellm-dashboard/src/components/policies/policy_table.tsx
+++ b/ui/litellm-dashboard/src/components/policies/policy_table.tsx
@@ -1,13 +1,12 @@
 import React, { useMemo, useState } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -328,11 +327,11 @@ const PolicyTable: React.FC<PolicyTableProps> = ({
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
         <Table className="[&_td]:py-0.5 [&_th]:py-1">
-          <TableHead>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHeaderCell
+                  <TableHead
                     key={header.id}
                     className={`py-1 h-8 ${
                       header.id === "actions"
@@ -367,11 +366,11 @@ const PolicyTable: React.FC<PolicyTableProps> = ({
                         </div>
                       )}
                     </div>
-                  </TableHeaderCell>
+                  </TableHead>
                 ))}
               </TableRow>
             ))}
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_table.tsx b/ui/litellm-dashboard/src/components/prompts/prompt_table.tsx
index a5909733afa..bcfefe5294c 100644
--- a/ui/litellm-dashboard/src/components/prompts/prompt_table.tsx
+++ b/ui/litellm-dashboard/src/components/prompts/prompt_table.tsx
@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -351,11 +350,11 @@ const PromptTable: React.FC<PromptTableProps> = ({
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
         <Table className="[&_td]:py-0.5 [&_th]:py-1">
-          <TableHead>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHeaderCell
+                  <TableHead
                     key={header.id}
                     className="py-1 h-8"
                     onClick={header.column.getToggleSortingHandler()}
@@ -384,11 +383,11 @@ const PromptTable: React.FC<PromptTableProps> = ({
                         )}
                       </div>
                     </div>
-                  </TableHeaderCell>
+                  </TableHead>
                 ))}
               </TableRow>
             ))}
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
diff --git a/ui/litellm-dashboard/src/components/team/available_teams.tsx b/ui/litellm-dashboard/src/components/team/available_teams.tsx
index 67f8f96612b..cc0f5d2cc97 100644
--- a/ui/litellm-dashboard/src/components/team/available_teams.tsx
+++ b/ui/litellm-dashboard/src/components/team/available_teams.tsx
@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -75,15 +74,15 @@ const AvailableTeamsPanel: React.FC<AvailableTeamsProps> = ({
   return (
     <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
       <Table>
-        <TableHead>
+        <TableHeader>
           <TableRow>
-            <TableHeaderCell>Team Name</TableHeaderCell>
-            <TableHeaderCell>Description</TableHeaderCell>
-            <TableHeaderCell>Members</TableHeaderCell>
-            <TableHeaderCell>Models</TableHeaderCell>
-            <TableHeaderCell>Actions</TableHeaderCell>
+            <TableHead>Team Name</TableHead>
+            <TableHead>Description</TableHead>
+            <TableHead>Members</TableHead>
+            <TableHead>Models</TableHead>
+            <TableHead>Actions</TableHead>
           </TableRow>
-        </TableHead>
+        </TableHeader>
         <TableBody>
           {availableTeams.map((team) => (
             <TableRow key={team.team_id}>
diff --git a/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.test.tsx b/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.test.tsx
index 56de48811b2..99c052655eb 100644
--- a/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.test.tsx
+++ b/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.test.tsx
@@ -28,13 +28,13 @@ vi.mock("../common_components/IconActionButton/TableIconActionButtons/TableIconA
   },
 }));
 
-// Mock Tremor components to avoid complex styling issues
-vi.mock("@tremor/react", () => ({
+// Mock shadcn table components to avoid complex styling issues
+vi.mock("@/components/ui/table", () => ({
   Table: ({ children, ...props }: any) => <table {...props}>{children}</table>,
-  TableHead: ({ children, ...props }: any) => <thead {...props}>{children}</thead>,
+  TableHeader: ({ children, ...props }: any) => <thead {...props}>{children}</thead>,
   TableBody: ({ children, ...props }: any) => <tbody {...props}>{children}</tbody>,
   TableRow: ({ children, ...props }: any) => <tr {...props}>{children}</tr>,
-  TableHeaderCell: ({ children, ...props }: any) => <th {...props}>{children}</th>,
+  TableHead: ({ children, ...props }: any) => <th {...props}>{children}</th>,
   TableCell: ({ children, ...props }: any) => <td {...props}>{children}</td>,
 }));
 
diff --git a/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.tsx b/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.tsx
index 283049a7c98..055de87b620 100644
--- a/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.tsx
+++ b/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.tsx
@@ -7,15 +7,14 @@ import {
   SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeaderCell,
+  TableHeader,
   TableRow,
-} from "@tremor/react";
+} from "@/components/ui/table";
 import {
   Tooltip,
   TooltipContent,
@@ -210,11 +209,11 @@ const VectorStoreTable: React.FC<VectorStoreTableProps> = ({ data, onView, onEdi
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
         <Table className="[&_td]:py-0.5 [&_th]:py-1">
-          <TableHead>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHeaderCell
+                  <TableHead
                     key={header.id}
                     className={`py-1 h-8 ${
                       header.id === "actions"
@@ -244,11 +243,11 @@ const VectorStoreTable: React.FC<VectorStoreTableProps> = ({ data, onView, onEdi
                         </div>
                       )}
                     </div>
-                  </TableHeaderCell>
+                  </TableHead>
                 ))}
               </TableRow>
             ))}
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {table.getRowModel().rows.length > 0 ? (
               table.getRowModel().rows.map((row) => (