From 7af17e56c20b79783b7325808bd15664218ae0e5 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 24 Apr 2026 13:43:31 +0000
Subject: [PATCH] feat(ui): migrate KeyModelUsageView tremor Card/Title to
 shadcn; keep BarChart

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 ui/litellm-dashboard/.eslintrc.json                       | 3 ++-
 .../components/UsagePage/components/KeyModelUsageView.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index 1b65a600453..a8fb65b91b0 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -181,7 +181,8 @@
         "src/components/EntityUsageExport/types.ts",
         "src/components/EntityUsageExport/UsageExportHeader.tsx",
         "src/components/EntityUsageExport/ExportSummary.tsx",
-        "src/components/UsagePage/components/EntityUsage/TopModelView.tsx"
+        "src/components/UsagePage/components/EntityUsage/TopModelView.tsx",
+        "src/components/UsagePage/components/KeyModelUsageView.tsx"
       ],
       "rules": {
         "litellm-ui/no-banned-ui-imports": "off",
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/KeyModelUsageView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/KeyModelUsageView.tsx
index 968525cfa7b..c026734c5b7 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/KeyModelUsageView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/KeyModelUsageView.tsx
@@ -1,6 +1,6 @@
 import { formatNumberWithCommas } from "@/utils/dataUtils";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { BarChart, Card, Title } from "@tremor/react";
+import { BarChart } from "@tremor/react";
+import { Card } from "@/components/ui/card";
 import {
   Table,
   TableBody,
@@ -28,9 +28,9 @@ const KeyModelUsageView: React.FC<KeyModelUsageViewProps> = ({ topModels }) => {
   }
 
   return (
-    <Card className="mt-4">
+    <Card className="mt-4 p-6">
       <div className="flex justify-between items-center mb-3">
-        <Title>Model Usage</Title>
+        <h3 className="text-lg font-semibold">Model Usage</h3>
         <div className="flex space-x-2">
           <button
             type="button"