diff --git a/packages/components/package.json b/packages/components/package.json
index 90422a47..367784ee 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -4,7 +4,7 @@
     "name": "DoltHub"
   },
   "description": "A collection of React components for common tasks",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dolthub/react-library.git"
@@ -136,4 +136,4 @@
     "typescript": "^5.6.3",
     "yalc": "^1.0.0-pre.53"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/components/src/Tabs/Tab.tsx b/packages/components/src/Tabs/Tab.tsx
index 3faacee0..666b0424 100644
--- a/packages/components/src/Tabs/Tab.tsx
+++ b/packages/components/src/Tabs/Tab.tsx
@@ -7,6 +7,7 @@ import css from "./index.module.css";
 type Props = {
   children: ReactNode;
   className?: string;
+  activeTabClassName?: string;
   index: number;
   name?: string;
   renderOnlyChild?: boolean;
@@ -22,16 +23,20 @@ export default function Tab(props: Props) {
   const label = `${isActive ? "active-" : ""}${tabLabel}`;
 
   if (props.hide) return null;
-
   return (
     <li
       data-cy={label}
       aria-label={label}
-      className={cx(css.tab, props.className, {
-        [css.activeTab]: isActive,
-        [css.smallTab]: !!props.small,
-        [css.darkTab]: !!props.dark,
-      })}
+      className={cx(
+        css.tab,
+        props.className,
+        {
+          [css.activeTab]: isActive,
+          [css.smallTab]: !!props.small,
+          [css.darkTab]: !!props.dark,
+        },
+        isActive ? props.activeTabClassName : null,
+      )}
     >
       {props.renderOnlyChild ? (
         props.children