feat(playground-ui): migrate Tabs to Base UI and add pill variant (#16414)

## Summary

- Migrates the `Tabs` component in `packages/playground-ui` from
`@radix-ui/react-tabs` to `@base-ui/react/tabs` (already a dep, used by
`Combobox`).
- Adds a new `pill` variant on `<TabList>` — animated background
indicator that slides behind the active trigger, à la the Base UI Tabs
demo.
- The default `line` variant now animates its underline smoothly between
tabs as well, using `<Tabs.Indicator>`.
- Public API (`Tabs`, `TabList`, `Tab`, `TabContent`) is unchanged —
existing call-sites keep the default `line` variant with no code change
required.
- Variant propagation is pure CSS via a `data-variant` attribute on
`TabList` plus Tailwind `group-data-[variant=...]/tabs-list:` selectors
— no React Context, no prop drilling.

### Usage

```tsx
<Tabs defaultTab="overview">
  <TabList variant="pill">
    <Tab value="overview">Overview</Tab>
    <Tab value="projects">Projects</Tab>
    <Tab value="account">Account</Tab>
  </TabList>
  <TabContent value="overview">…</TabContent>
</Tabs>
```

## Test plan

- [ ] `pnpm storybook` (from `packages/playground-ui`) → Navigation/Tabs
- [ ] Existing stories (Default, TwoTabs, ManyTabs, WithClosableTabs)
render and behave as before — underline now glides between tabs
- [ ] New `PillVariant` story — background pill slides fluidly between
triggers on click and on arrow-key navigation
- [ ] Existing call-sites unchanged visually:
  - [ ] `CodeBlock` with `selector="tabs"`
  - [ ] `span-data-panel-view` (traces detail panel)
  - [ ] Metrics cards on agents page
- [ ] Keyboard a11y: Tab to enter, Arrow Left/Right to switch,
`data-active` present on active trigger

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## ELI5

The Tabs component is switched to a different internal library (Base UI)
and gets a new "pill" style where a colored background smoothly slides
behind the active tab; the default "line" style now animates its
underline smoothly. From the outside the component still works the same
so existing code doesn't need changes.

## Overview

This PR migrates the Tabs implementation in packages/playground-ui from
@radix-ui/react-tabs to @base-ui/react/tabs, adds a new TabList `pill`
variant with a sliding background indicator, and improves the `line`
variant to animate its underline between tabs. Public usage of Tabs
(Tabs, TabList, Tab, TabContent) remains compatible with existing call
sites.

## Implementation Details

- tabs-root.tsx
- Replaced Radix Root with BaseTabs.Root and removed internal
controlled/uncontrolled state management;
defaultValue/value/onValueChange are delegated to BaseTabs.
- tabs-list.tsx
- Introduces CVA-driven `tabListVariants` with `line` (default) and
`pill`.
- Adds a `variant` prop and sets `data-variant` on the list for Tailwind
group-data selectors.
- Renders BaseTabs.Indicator differently for `line` vs `pill` using CSS
variables for width/offset.
- ClassName handling changed so consumer `className` is applied to the
actual BaseTabs.List element (restores previous behavior via a
subsequent fix).
- tabs-tab.tsx
- Replaced Radix Trigger with BaseTabs.Tab and updated styles to rely on
Base UI data attributes (`data-[active]`, `data-[disabled]`) and the new
variant group selectors.
  - Close-button behavior (stopPropagation + onClose) preserved.
- tabs-content.tsx
- Replaced Radix Content with BaseTabs.Panel; preserves `value` and
className behavior.
- tabs.stories.tsx
- Adds a `PillVariant` Storybook story demonstrating the new
`variant="pill"` usage.

Commit/fix note:
- fix(playground-ui): ensure consumer `className` is applied to the
actual TabList element (not only the outer scroll wrapper).

## Styling & Variant Propagation

Variant behavior is driven by a `data-variant` attribute on TabList and
targeted with Tailwind `group-data-[variant=...]/tabs-list:`
selectors—no React Context or prop drilling. CSS variables are used to
compute the active tab's width and left offset so the BaseTabs.Indicator
can animate smoothly for both `line` and `pill` visuals.

## Testing / Review Plan

- Visual: Storybook (Navigation/Tabs) including the new PillVariant
story; visual checks on existing call sites (CodeBlock selector="tabs",
span-data-panel-view, metrics cards).
- Interaction: Keyboard accessibility (Tab to focus, Arrow Left/Right to
change tabs), verify `data-[active]`/`data-active` state on active
trigger.
- Sanity: Ensure existing call sites render identically with default
styling and that the `pill` story shows the sliding background.

## Notes on API/Types

The outward component API remains compatible; callers do not need to
change. Internally TabList accepts a `variant` prop (typed via CVA's
VariantProps) to opt into `pill`, and className application to the list
element was corrected.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/mastra-ai/mastra/pull/16414)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: damien-schneider

.changeset/polite-kids-poke.md

@@ -0,0 +1,25 @@
+---
+'@mastra/playground-ui': minor
+---
+
+Added a new `pill` variant on `TabList` with an animated background indicator that slides behind the active trigger. The default `line` variant now animates its underline smoothly between tabs as well. Implemented by migrating the underlying Tabs component from Radix UI to Base UI.
+
+```tsx
+// Before — only the line (underline) style was available
+<Tabs defaultTab="overview">
+  <TabList>
+    <Tab value="overview">Overview</Tab>
+    <Tab value="projects">Projects</Tab>
+  </TabList>
+</Tabs>
+
+// After — opt into the new pill style via the `variant` prop on TabList
+<Tabs defaultTab="overview">
+  <TabList variant="pill">
+    <Tab value="overview">Overview</Tab>
+    <Tab value="projects">Projects</Tab>
+  </TabList>
+</Tabs>
+```
+
+The public API (`Tabs`, `TabList`, `Tab`, `TabContent`) is unchanged; existing call-sites keep the default `line` variant.

packages/playground-ui/src/ds/components/Tabs/tabs-content.tsx

@@ -1,4 +1,4 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { focusRing } from '@/ds/primitives/transitions';
 import { cn } from '@/lib/utils';
 
@@ -10,11 +10,11 @@ export type TabContentProps = {
 
 export const TabContent = ({ children, value, className }: TabContentProps) => {
   return (
-    <RadixTabs.Content
+    <BaseTabs.Panel
       value={value}
       className={cn('grid py-3 overflow-y-auto ring-offset-background', focusRing.visible, className)}
     >
       {children}
-    </RadixTabs.Content>
+    </BaseTabs.Panel>
   );
 };

packages/playground-ui/src/ds/components/Tabs/tabs-list.tsx

@@ -1,19 +1,56 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
+const tabListVariants = cva('flex items-center relative text-ui-lg', {
+  variants: {
+    variant: {
+      line: 'w-max min-w-full border-b border-border1',
+      pill: 'w-fit gap-1 rounded-full bg-surface2 p-1',
+    },
+  },
+  defaultVariants: {
+    variant: 'line',
+  },
+});
+
 export type TabListProps = {
   children: React.ReactNode;
   className?: string;
-};
+} & VariantProps<typeof tabListVariants>;
+
+export const TabList = ({ children, className, variant }: TabListProps) => {
+  const resolvedVariant = variant ?? 'line';
 
-export const TabList = ({ children, className }: TabListProps) => {
   return (
-    <div className={cn('w-full overflow-x-auto', className)}>
-      <RadixTabs.List
-        className={cn('flex items-center relative w-max min-w-full', 'text-ui-lg border-b border-border1', className)}
+    <div className="w-full overflow-x-auto">
+      <BaseTabs.List
+        data-variant={resolvedVariant}
+        className={cn('group/tabs-list', tabListVariants({ variant: resolvedVariant }), className)}
       >
         {children}
-      </RadixTabs.List>
+        {resolvedVariant === 'line' && (
+          <BaseTabs.Indicator
+            className={cn(
+              'absolute bottom-0 left-0 bg-neutral3',
+              'w-[var(--active-tab-width)] h-0.5',
+              'transition-all duration-200 ease-in-out',
+            )}
+            style={{ transform: 'translateX(var(--active-tab-left))' }}
+          />
+        )}
+        {resolvedVariant === 'pill' && (
+          <BaseTabs.Indicator
+            className={cn(
+              'absolute top-1/2 left-0 z-0 rounded-full bg-surface4',
+              'w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]',
+              'transition-all duration-200 ease-in-out',
+            )}
+            style={{ transform: 'translateY(-50%) translateX(var(--active-tab-left))' }}
+          />
+        )}
+      </BaseTabs.List>
     </div>
   );
 };

packages/playground-ui/src/ds/components/Tabs/tabs-root.tsx

@@ -1,5 +1,4 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
-import { useState } from 'react';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { cn } from '@/lib/utils';
 
 export type TabsRootProps<T extends string> = {
@@ -11,23 +10,14 @@ export type TabsRootProps<T extends string> = {
 };
 
 export const Tabs = <T extends string>({ children, defaultTab, value, onValueChange, className }: TabsRootProps<T>) => {
-  const [internalTab, setInternalTab] = useState<T>(defaultTab);
-
-  // Use controlled mode if value and onValueChange are provided
-  const isControlled = value !== undefined && onValueChange !== undefined;
-  const currentTab = isControlled ? value : internalTab;
-  const handleTabChange = (newValue: string) => {
-    const typedValue = newValue as T;
-    if (isControlled) {
-      onValueChange(typedValue);
-    } else {
-      setInternalTab(typedValue);
-    }
-  };
-
   return (
-    <RadixTabs.Root value={currentTab} onValueChange={handleTabChange} className={cn('overflow-y-auto', className)}>
+    <BaseTabs.Root
+      defaultValue={defaultTab}
+      value={value}
+      onValueChange={onValueChange ? next => onValueChange(next as T) : undefined}
+      className={cn('overflow-y-auto', className)}
+    >
       {children}
-    </RadixTabs.Root>
+    </BaseTabs.Root>
   );
 };

packages/playground-ui/src/ds/components/Tabs/tabs-tab.tsx

@@ -1,4 +1,4 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { X } from 'lucide-react';
 import { transitions, focusRing } from '@/ds/primitives/transitions';
 import { cn } from '@/lib/utils';
@@ -14,17 +14,24 @@ export type TabProps = {
 
 export const Tab = ({ children, value, onClick, onClose, disabled, className }: TabProps) => {
   return (
-    <RadixTabs.Trigger
+    <BaseTabs.Tab
       value={value}
       disabled={disabled}
       className={cn(
-        'py-2 px-5 text-ui-md font-normal text-neutral3 border-b-2 border-transparent',
+        'text-ui-md font-normal text-neutral3',
         'whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none cursor-pointer',
         transitions.colors,
         focusRing.visible,
         'hover:text-neutral4',
-        'data-[state=active]:text-neutral5 data-[state=active]:border-neutral3',
+        'data-[active]:text-neutral5',
         'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-neutral3',
+        // Line variant (default) — active state drawn by <Tabs.Indicator> in TabList
+        'group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:px-5',
+        'group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent',
+        // Pill variant
+        'group-data-[variant=pill]/tabs-list:relative group-data-[variant=pill]/tabs-list:z-10',
+        'group-data-[variant=pill]/tabs-list:py-1 group-data-[variant=pill]/tabs-list:px-3',
+        'group-data-[variant=pill]/tabs-list:rounded-full',
         className,
       )}
       onClick={onClick}
@@ -42,6 +49,6 @@ export const Tab = ({ children, value, onClick, onClose, disabled, className }:
           <X className="w-3 h-3" />
         </button>
       )}
-    </RadixTabs.Trigger>
+    </BaseTabs.Tab>
   );
 };

packages/playground-ui/src/ds/components/Tabs/tabs.stories.tsx

@@ -82,6 +82,27 @@ export const ManyTabs: Story = {
   ),
 };
 
+export const PillVariant: Story = {
+  render: () => (
+    <Tabs defaultTab="overview" className="w-[500px]">
+      <TabList variant="pill">
+        <Tab value="overview">Overview</Tab>
+        <Tab value="projects">Projects</Tab>
+        <Tab value="account">Account</Tab>
+      </TabList>
+      <TabContent value="overview">
+        <div className="p-4 text-neutral5">Overview content</div>
+      </TabContent>
+      <TabContent value="projects">
+        <div className="p-4 text-neutral5">Projects content</div>
+      </TabContent>
+      <TabContent value="account">
+        <div className="p-4 text-neutral5">Account content</div>
+      </TabContent>
+    </Tabs>
+  ),
+};
+
 export const WithClosableTabs: Story = {
   render: () => (
     <Tabs defaultTab="file1" className="w-[400px]">