From b599c8bfd41a26e4e8f38cd8f0915f2e048188d6 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Wed, 15 Apr 2026 10:39:25 -0700
Subject: [PATCH] refactor(ui): reduce Tremor usage in Guardrails Monitor
 layout

Move Guardrails Monitor overview/detail layout wrappers and section heading components to antd/plain Tailwind while keeping the existing Tremor chart and date picker behavior unchanged for a smaller, low-risk migration step.
---
 .../GuardrailsMonitor/GuardrailDetail.tsx     | 21 ++++------
 .../GuardrailsMonitor/GuardrailsOverview.tsx  | 41 +++++++++----------
 .../GuardrailsMonitor/ScoreChart.tsx          |  1 +
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx
index 3447b4cb78..057ff702f0 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx
@@ -5,7 +5,6 @@ import {
   WarningOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@tanstack/react-query";
-import { Col, Grid } from "@tremor/react";
 import { Button, Spin, Tabs } from "antd";
 import React, { useMemo, useState } from "react";
 import {
@@ -172,11 +171,11 @@ export function GuardrailDetail({
 
       {activeTab === "overview" && (
         <div className="space-y-6 mt-4">
-          <Grid numItems={2} numItemsMd={5} className="gap-4">
-            <Col>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            <div className="min-w-0">
               <MetricCard label="Requests Evaluated" value={data.requestsEvaluated.toLocaleString()} />
-            </Col>
-            <Col>
+            </div>
+            <div className="min-w-0">
               <MetricCard
                 label="Fail Rate"
                 value={`${data.failRate}%`}
@@ -186,13 +185,11 @@ export function GuardrailDetail({
                 subtitle={`${Math.round((data.requestsEvaluated * data.failRate) / 100).toLocaleString()} blocked`}
                 icon={data.failRate > 15 ? <WarningOutlined className="text-red-400" /> : undefined}
               />
-            </Col>
-            <Col>
+            </div>
+            <div className="min-w-0">
               <MetricCard
                 label="Avg. latency added"
-                value={
-                  data.avgLatency != null ? `${Math.round(data.avgLatency)}ms` : "—"
-                }
+                value={data.avgLatency != null ? `${Math.round(data.avgLatency)}ms` : "—"}
                 valueColor={
                   data.avgLatency != null
                     ? data.avgLatency > 150
@@ -204,8 +201,8 @@ export function GuardrailDetail({
                 }
                 subtitle={data.avgLatency != null ? "Per request (avg)" : "No data"}
               />
-            </Col>
-          </Grid>
+            </div>
+          </div>
 
           <LogViewer
             guardrailName={data.name}
diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
index d2fa53bc6c..2437dc6aa2 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
@@ -6,8 +6,7 @@ import {
   WarningOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@tanstack/react-query";
-import { Card, Col, Grid, Title } from "@tremor/react";
-import { Button, Spin, Table } from "antd";
+import { Button, Card, Spin, Table, Typography } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import React, { useMemo, useState } from "react";
 import { getGuardrailsUsageOverview } from "@/components/networking";
@@ -218,27 +217,27 @@ export function GuardrailsOverview({
         </div>
       </div>
 
-      <Grid numItems={2} numItemsLg={5} className="gap-4 mb-6 items-stretch">
-        <Col className="flex flex-col">
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6 items-stretch">
+        <div className="flex flex-col min-w-0">
           <MetricCard label="Total Evaluations" value={metrics.totalRequests.toLocaleString()} />
-        </Col>
-        <Col className="flex flex-col">
+        </div>
+        <div className="flex flex-col min-w-0">
           <MetricCard
             label="Blocked Requests"
             value={metrics.totalBlocked.toLocaleString()}
             valueColor="text-red-600"
             icon={<WarningOutlined className="text-red-400" />}
           />
-        </Col>
-        <Col className="flex flex-col">
+        </div>
+        <div className="flex flex-col min-w-0">
           <MetricCard
             label="Pass Rate"
             value={`${metrics.passRate}%`}
             valueColor="text-green-600"
             icon={<RiseOutlined className="text-green-400" />}
           />
-        </Col>
-        <Col className="flex flex-col">
+        </div>
+        <div className="flex flex-col min-w-0">
           <MetricCard
             label="Avg. latency added"
             value={`${metrics.avgLatency}ms`}
@@ -250,20 +249,20 @@ export function GuardrailsOverview({
                   : "text-green-600"
             }
           />
-        </Col>
-        <Col className="flex flex-col">
-          <MetricCard
-            label="Active Guardrails"
-            value={metrics.count}
-          />
-        </Col>
-      </Grid>
+        </div>
+        <div className="flex flex-col min-w-0">
+          <MetricCard label="Active Guardrails" value={metrics.count} />
+        </div>
+      </div>
 
       <div className="mb-6">
         <ScoreChart data={chartData} />
       </div>
 
-      <Card className="bg-white border border-gray-200 rounded-lg">
+      <Card
+        className="border border-gray-200 rounded-lg bg-white"
+        styles={{ body: { padding: 0 } }}
+      >
         {(isLoading || error) && (
           <div className="px-6 py-4 border-b border-gray-200 flex items-center gap-2">
             {isLoading && <Spin size="small" />}
@@ -272,9 +271,9 @@ export function GuardrailsOverview({
         )}
         <div className="px-6 py-4 border-b border-gray-200 flex items-start justify-between gap-4">
           <div>
-            <Title className="text-base font-semibold text-gray-900">
+            <Typography.Title level={5} className="!mb-0 text-gray-900">
               Guardrail Performance
-            </Title>
+            </Typography.Title>
             <p className="text-xs text-gray-500 mt-0.5">
               Click a guardrail to view details, logs, and configuration
             </p>
diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/ScoreChart.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/ScoreChart.tsx
index e4803747d4..17c6f4d1f0 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/ScoreChart.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/ScoreChart.tsx
@@ -11,6 +11,7 @@ interface ScoreChartProps {
 
 export function ScoreChart({ data }: ScoreChartProps) {
   const chartData = data && data.length > 0 ? data : [];
+
   return (
     <Card className="bg-white border border-gray-200">
       <Title className="text-base font-semibold text-gray-900 mb-4">