diff --git a/packages/atomic-react/src/components/search/components.ts b/packages/atomic-react/src/components/search/components.ts
index ea375881b7f..d772d1e841a 100644
--- a/packages/atomic-react/src/components/search/components.ts
+++ b/packages/atomic-react/src/components/search/components.ts
@@ -38,6 +38,7 @@ import {
   AtomicSearchBoxRecentQueries as LitAtomicSearchBoxRecentQueries,
   AtomicSearchInterface as LitAtomicSearchInterface,
   AtomicSearchLayout as LitAtomicSearchLayout,
+  AtomicTab as LitAtomicTab,
   AtomicText as LitAtomicText,
 } from '@coveo/atomic/components';
 import {createComponent} from '@lit/react';
@@ -277,6 +278,12 @@ export const AtomicSearchLayout = createComponent({
   elementClass: LitAtomicSearchLayout,
 });
 
+export const AtomicTab = createComponent({
+  tagName: 'atomic-tab',
+  react: React,
+  elementClass: LitAtomicTab,
+});
+
 export const AtomicText = createComponent({
   tagName: 'atomic-text',
   react: React,
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
index d267ccb8b38..06806ccb797 100644
--- a/packages/atomic/src/components.d.ts
+++ b/packages/atomic/src/components.d.ts
@@ -1933,24 +1933,6 @@ export namespace Components {
         "side": 'left' | 'right';
         "suggestion": SearchBoxSuggestionElement;
     }
-    /**
-     * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
-     * It must be used as a child of the `atomic-tab-manager` component to function correctly.
-     */
-    interface AtomicTab {
-        /**
-          * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
-         */
-        "expression": string;
-        /**
-          * The label to display on the tab.
-         */
-        "label": string;
-        /**
-          * The internal name of the atomic tab.
-         */
-        "name": string;
-    }
     interface AtomicTabBar {
     }
     interface AtomicTabButton {
@@ -3181,16 +3163,6 @@ declare global {
         prototype: HTMLAtomicSuggestionRendererElement;
         new (): HTMLAtomicSuggestionRendererElement;
     };
-    /**
-     * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
-     * It must be used as a child of the `atomic-tab-manager` component to function correctly.
-     */
-    interface HTMLAtomicTabElement extends Components.AtomicTab, HTMLStencilElement {
-    }
-    var HTMLAtomicTabElement: {
-        prototype: HTMLAtomicTabElement;
-        new (): HTMLAtomicTabElement;
-    };
     interface HTMLAtomicTabBarElement extends Components.AtomicTabBar, HTMLStencilElement {
     }
     var HTMLAtomicTabBarElement: {
@@ -3350,7 +3322,6 @@ declare global {
         "atomic-sort-expression": HTMLAtomicSortExpressionElement;
         "atomic-stencil-facet-date-input": HTMLAtomicStencilFacetDateInputElement;
         "atomic-suggestion-renderer": HTMLAtomicSuggestionRendererElement;
-        "atomic-tab": HTMLAtomicTabElement;
         "atomic-tab-bar": HTMLAtomicTabBarElement;
         "atomic-tab-button": HTMLAtomicTabButtonElement;
         "atomic-tab-manager": HTMLAtomicTabManagerElement;
@@ -5229,24 +5200,6 @@ declare namespace LocalJSX {
         "side": 'left' | 'right';
         "suggestion": SearchBoxSuggestionElement;
     }
-    /**
-     * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
-     * It must be used as a child of the `atomic-tab-manager` component to function correctly.
-     */
-    interface AtomicTab {
-        /**
-          * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
-         */
-        "expression"?: string;
-        /**
-          * The label to display on the tab.
-         */
-        "label": string;
-        /**
-          * The internal name of the atomic tab.
-         */
-        "name": string;
-    }
     interface AtomicTabBar {
     }
     interface AtomicTabButton {
@@ -5470,7 +5423,6 @@ declare namespace LocalJSX {
         "atomic-sort-expression": AtomicSortExpression;
         "atomic-stencil-facet-date-input": AtomicStencilFacetDateInput;
         "atomic-suggestion-renderer": AtomicSuggestionRenderer;
-        "atomic-tab": AtomicTab;
         "atomic-tab-bar": AtomicTabBar;
         "atomic-tab-button": AtomicTabButton;
         "atomic-tab-manager": AtomicTabManager;
@@ -5836,11 +5788,6 @@ declare module "@stencil/core" {
              * use native Elements.
              */
             "atomic-suggestion-renderer": LocalJSX.AtomicSuggestionRenderer & JSXBase.HTMLAttributes<HTMLAtomicSuggestionRendererElement>;
-            /**
-             * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
-             * It must be used as a child of the `atomic-tab-manager` component to function correctly.
-             */
-            "atomic-tab": LocalJSX.AtomicTab & JSXBase.HTMLAttributes<HTMLAtomicTabElement>;
             "atomic-tab-bar": LocalJSX.AtomicTabBar & JSXBase.HTMLAttributes<HTMLAtomicTabBarElement>;
             "atomic-tab-button": LocalJSX.AtomicTabButton & JSXBase.HTMLAttributes<HTMLAtomicTabButtonElement>;
             /**
diff --git a/packages/atomic/src/components/common/tabs/tab-button.tsx b/packages/atomic/src/components/common/tabs/tab-button.tsx
index 18aef6b085d..9ee75e46f3b 100644
--- a/packages/atomic/src/components/common/tabs/tab-button.tsx
+++ b/packages/atomic/src/components/common/tabs/tab-button.tsx
@@ -31,7 +31,7 @@ export class AtomicTabButton {
   }
 
   private get activeTabTextClass() {
-    return this.active ? '' : 'text-neutral-dark hover:text-primary-light';
+    return this.active ? '' : 'text-neutral-dark';
   }
 
   render() {
@@ -44,7 +44,7 @@ export class AtomicTabButton {
         part={'button-container' + (this.active ? '-active' : '')}
       >
         <Button
-          class={`w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`}
+          class={`w-full truncate px-2 pb-1 text-xl sm:px-6 hover:text-primary ${this.activeTabTextClass}`}
           part={'tab-button' + (this.active ? '-active' : '')}
           onClick={this.select}
           style="text-transparent"
diff --git a/packages/atomic/src/components/search/atomic-tab/atomic-tab.mdx b/packages/atomic/src/components/search/atomic-tab/atomic-tab.mdx
new file mode 100644
index 00000000000..36ff39397ff
--- /dev/null
+++ b/packages/atomic/src/components/search/atomic-tab/atomic-tab.mdx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicTabStories from './atomic-tab.new.stories';
+import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+
+<Meta of={AtomicTabStories} />
+
+<AtomicDocTemplate
+  stories={AtomicTabStories}
+  githubPath="search/atomic-tab/atomic-tab.ts"
+  tagName="atomic-tab"
+  className="AtomicTab"
+>
+
+The `atomic-tab` component must be used as a child of the `atomic-tab-manager` component to function correctly.
+
+This component is not used standalone. It must be a child of `atomic-tab-manager`.
+
+See the [atomic-tab-manager documentation](?path=/docs/atomic-tab-manager--docs) for additional usage examples.
+
+```html
+<atomic-search-interface>
+  <!-- other components -->
+  
+  <atomic-tab-manager>
+    <atomic-tab name="all" label="All"></atomic-tab>
+    <atomic-tab name="images" label="Images" expression="@objecttype==Image"></atomic-tab>
+    <atomic-tab name="articles" label="Articles" expression="@objecttype==Article"></atomic-tab>
+  </atomic-tab-manager>
+
+  <!-- other components -->
+</atomic-search-interface>
+```
+
+## Related Components
+
+- [atomic-tab-manager](?path=/docs/atomic-tab-manager--docs): Manages a collection of tabs and allows users to switch between them
+
+</AtomicDocTemplate>
diff --git a/packages/atomic/src/components/search/atomic-tab/atomic-tab.new.stories.tsx b/packages/atomic/src/components/search/atomic-tab/atomic-tab.new.stories.tsx
new file mode 100644
index 00000000000..61c99e04d03
--- /dev/null
+++ b/packages/atomic/src/components/search/atomic-tab/atomic-tab.new.stories.tsx
@@ -0,0 +1,44 @@
+import type {Meta, StoryObj as Story} from '@storybook/web-components-vite';
+import {getStorybookHelpers} from '@wc-toolkit/storybook-helpers';
+import {html} from 'lit';
+import {parameters} from '@/storybook-utils/common/common-meta-parameters';
+import {wrapInSearchInterface} from '@/storybook-utils/search/search-interface-wrapper';
+
+const {decorator, play} = wrapInSearchInterface();
+
+const {events, argTypes} = getStorybookHelpers('atomic-tab', {
+  excludeCategories: ['methods'],
+});
+
+const meta: Meta = {
+  component: 'atomic-tab',
+  title: 'Search/Tab',
+  id: 'atomic-tab',
+  render: () => html`<atomic-tab-manager>
+          <atomic-tab
+            label="All"
+            name="all"
+          ></atomic-tab>
+          <atomic-tab
+            label="Images"
+            name="images"
+          ></atomic-tab>
+          <atomic-tab
+            label="Articles"
+            name="articles"
+          ></atomic-tab>
+        </atomic-tab-manager>`,
+  decorators: [decorator],
+  parameters: {
+    ...parameters,
+    actions: {
+      handles: events,
+    },
+  },
+  argTypes,
+  play,
+};
+
+export default meta;
+
+export const Default: Story = {};
diff --git a/packages/atomic/src/components/search/atomic-tab/atomic-tab.spec.ts b/packages/atomic/src/components/search/atomic-tab/atomic-tab.spec.ts
new file mode 100644
index 00000000000..76dfa21585d
--- /dev/null
+++ b/packages/atomic/src/components/search/atomic-tab/atomic-tab.spec.ts
@@ -0,0 +1,86 @@
+import {html} from 'lit';
+import {describe, expect, it} from 'vitest';
+import {fixture} from '@/vitest-utils/testing-helpers/fixture';
+import type {AtomicTab} from './atomic-tab';
+import './atomic-tab';
+
+describe('atomic-tab', () => {
+  const renderTab = async ({
+    label = 'Test Tab',
+    name = 'test-tab',
+    expression = '',
+  } = {}) => {
+    const element = await fixture<AtomicTab>(html`
+      <atomic-tab
+        label="${label}"
+        name="${name}"
+        expression="${expression}"
+      ></atomic-tab>
+    `);
+
+    return {element};
+  };
+
+  describe('when rendering with valid props', () => {
+    it('should render successfully with required props', async () => {
+      const {element} = await renderTab();
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should render successfully with all props', async () => {
+      const {element} = await renderTab({
+        label: 'My Tab',
+        name: 'my-tab',
+        expression: '@source==MySource',
+      });
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should reflect label property to attribute', async () => {
+      const {element} = await renderTab({label: 'Custom Label'});
+      expect(element.getAttribute('label')).toBe('Custom Label');
+    });
+
+    it('should reflect name property to attribute', async () => {
+      const {element} = await renderTab({name: 'custom-name'});
+      expect(element.getAttribute('name')).toBe('custom-name');
+    });
+
+    it('should reflect expression property to attribute', async () => {
+      const {element} = await renderTab({expression: '@source==Test'});
+      expect(element.getAttribute('expression')).toBe('@source==Test');
+    });
+
+    it('should have empty expression by default', async () => {
+      const {element} = await renderTab();
+      expect(element.expression).toBe('');
+    });
+
+    it('should allow updating properties', async () => {
+      const {element} = await renderTab();
+
+      element.label = 'Updated Label';
+      element.name = 'updated-name';
+      element.expression = '@updated==true';
+      await element.updateComplete;
+
+      expect(element.label).toBe('Updated Label');
+      expect(element.name).toBe('updated-name');
+      expect(element.expression).toBe('@updated==true');
+    });
+  });
+
+  describe('when rendering slots', () => {
+    it('should render default slot content', async () => {
+      const element = await fixture<AtomicTab>(html`
+        <atomic-tab label="Test" name="test">
+          <div id="slot-content">Slot Content</div>
+        </atomic-tab>
+      `);
+
+      const slotContent = element.querySelector('#slot-content');
+      expect(slotContent).toBeInTheDocument();
+      expect(slotContent?.textContent).toBe('Slot Content');
+    });
+  });
+});
diff --git a/packages/atomic/src/components/search/atomic-tab/atomic-tab.ts b/packages/atomic/src/components/search/atomic-tab/atomic-tab.ts
new file mode 100644
index 00000000000..d2646816af9
--- /dev/null
+++ b/packages/atomic/src/components/search/atomic-tab/atomic-tab.ts
@@ -0,0 +1,57 @@
+import {Schema, StringValue} from '@coveo/bueno';
+import {html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {ValidatePropsController} from '@/src/components/common/validate-props-controller/validate-props-controller';
+import {LightDomMixin} from '@/src/mixins/light-dom';
+
+/**
+ * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
+ * It must be used as a child of the `atomic-tab-manager` component to function correctly.
+ *
+ * @slot default - The default slot for any additional content within the tab (rarely used).
+ */
+@customElement('atomic-tab')
+export class AtomicTab extends LightDomMixin(LitElement) {
+  /**
+   * The label to display on the tab.
+   */
+  @property({type: String, reflect: true}) label!: string;
+
+  /**
+   * The internal name of the atomic tab.
+   */
+  @property({type: String, reflect: true}) name!: string;
+
+  /**
+   * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
+   */
+  @property({type: String, reflect: true}) public expression: string = '';
+
+  @state() public error!: Error;
+
+  constructor() {
+    super();
+
+    new ValidatePropsController(
+      this,
+      () => ({
+        label: this.label,
+        name: this.name,
+      }),
+      new Schema({
+        label: new StringValue({required: true, emptyAllowed: false}),
+        name: new StringValue({required: true, emptyAllowed: false}),
+      })
+    );
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'atomic-tab': AtomicTab;
+  }
+}
diff --git a/packages/atomic/src/components/search/index.ts b/packages/atomic/src/components/search/index.ts
index 74563ec18a3..6cef7275da4 100644
--- a/packages/atomic/src/components/search/index.ts
+++ b/packages/atomic/src/components/search/index.ts
@@ -32,4 +32,5 @@ export {AtomicSearchBoxQuerySuggestions} from './atomic-search-box-query-suggest
 export {AtomicSearchBoxRecentQueries} from './atomic-search-box-recent-queries/atomic-search-box-recent-queries.js';
 export {AtomicSearchInterface} from './atomic-search-interface/atomic-search-interface.js';
 export {AtomicSearchLayout} from './atomic-search-layout/atomic-search-layout.js';
+export {AtomicTab} from './atomic-tab/atomic-tab.js';
 export {AtomicText} from './atomic-text/atomic-text.js';
diff --git a/packages/atomic/src/components/search/lazy-index.ts b/packages/atomic/src/components/search/lazy-index.ts
index a9457594d42..12a2c8fb871 100644
--- a/packages/atomic/src/components/search/lazy-index.ts
+++ b/packages/atomic/src/components/search/lazy-index.ts
@@ -88,6 +88,7 @@ export default {
     await import('./atomic-search-interface/atomic-search-interface.js'),
   'atomic-search-layout': async () =>
     await import('./atomic-search-layout/atomic-search-layout.js'),
+  'atomic-tab': async () => await import('./atomic-tab/atomic-tab.js'),
   'atomic-text': async () => await import('./atomic-text/atomic-text.js'),
 } as Record<string, () => Promise<unknown>>;
 
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab/atomic-tab.tsx b/packages/atomic/src/components/search/tabs/atomic-tab/atomic-tab.tsx
deleted file mode 100644
index 8d3d95e61f3..00000000000
--- a/packages/atomic/src/components/search/tabs/atomic-tab/atomic-tab.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Component, Prop, Element} from '@stencil/core';
-
-/**
- * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
- * It must be used as a child of the `atomic-tab-manager` component to function correctly.
- */
-@Component({
-  tag: 'atomic-tab',
-  shadow: false,
-})
-export class AtomicTab {
-  @Element() public host!: HTMLElement;
-
-  /**
-   * The label to display on the tab.
-   */
-  @Prop() label!: string;
-  /**
-   * The internal name of the atomic tab.
-   */
-  @Prop() name!: string;
-  /**
-   * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
-   */
-  @Prop() public expression: string = '';
-}
diff --git a/packages/atomic/src/utils/custom-element-tags.ts b/packages/atomic/src/utils/custom-element-tags.ts
index fc9bcea2054..4d94f195d4c 100644
--- a/packages/atomic/src/utils/custom-element-tags.ts
+++ b/packages/atomic/src/utils/custom-element-tags.ts
@@ -101,6 +101,7 @@ export const ATOMIC_CUSTOM_ELEMENT_TAGS = new Set<string>([
   'atomic-search-box-recent-queries',
   'atomic-search-interface',
   'atomic-search-layout',
+  'atomic-tab',
   'atomic-text',
 ]);