diff --git a/ui/litellm-dashboard/src/components/ui/badge.tsx b/ui/litellm-dashboard/src/components/ui/badge.tsx
index f86e36cb11a..87b536cc37e 100644
--- a/ui/litellm-dashboard/src/components/ui/badge.tsx
+++ b/ui/litellm-dashboard/src/components/ui/badge.tsx
@@ -1,39 +1,33 @@
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
+import { type VariantProps } from "cva";
 
-import { cn } from "@/lib/cva.config";
+import { cn, cva } from "@/lib/cva.config";
 
-const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
+const badgeVariants = cva({
+  base: "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+      secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+      destructive:
+        "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+      outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 [a&]:hover:underline",
     },
   },
-);
+  defaultVariants: {
+    variant: "default",
+  },
+});
 
 function Badge({
   className,
   variant = "default",
-  asChild = false,
   ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span";
-
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
   return (
-    <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
+    <span data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
   );
 }
 
diff --git a/ui/litellm-dashboard/src/components/ui/tabs.tsx b/ui/litellm-dashboard/src/components/ui/tabs.tsx
index 1f6ccca5f73..d4d4eed75b0 100644
--- a/ui/litellm-dashboard/src/components/ui/tabs.tsx
+++ b/ui/litellm-dashboard/src/components/ui/tabs.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps } from "cva";
 import { Tabs as TabsPrimitive } from "radix-ui";
 
-import { cn } from "@/lib/cva.config";
+import { cn, cva } from "@/lib/cva.config";
 
 function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
@@ -18,20 +18,18 @@ function Tabs({ className, orientation = "horizontal", ...props }: React.Compone
   );
 }
 
-const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
+const tabsListVariants = cva({
+  base: "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  variants: {
+    variant: {
+      default: "bg-muted",
+      line: "gap-1 bg-transparent",
     },
   },
-);
+  defaultVariants: {
+    variant: "default",
+  },
+});
 
 function TabsList({
   className,