
```jsx
import { CTabs } from '@coreui/react'
// or
import CTabs from '@coreui/react/src/components/tabs/CTabs'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="ctabs-active-item-key">
        <td className="text-primary fw-semibold">activeItemKey<a href="#ctabs-active-item-key" aria-label="CTabs activeItemKey permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Controls the currently active tab.<br />
 When provided, the component operates in a controlled mode. You must handle tab switching manually by updating this prop.</p>
        <JSXDocs code={`const [activeTab, setActiveTab] = useState(0);
<CTabs activeItemKey={activeTab} onChange={setActiveTab} />`} />
        </td>
      </tr>
      <tr id="ctabs-class-name">
        <td className="text-primary fw-semibold">className<a href="#ctabs-class-name" aria-label="CTabs className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="ctabs-default-active-item-key">
        <td className="text-primary fw-semibold">defaultActiveItemKey<a href="#ctabs-default-active-item-key" aria-label="CTabs defaultActiveItemKey permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets the initially active tab when the component mounts.<br />
 After initialization, the component manages active tab changes internally.<br />
 Use <code>{`defaultActiveItemKey`}</code> for uncontrolled usage.</p>
        <JSXDocs code={`<CTabs defaultActiveItemKey={1} />`} />
        </td>
      </tr>
      <tr id="ctabs-on-change">
        <td className="text-primary fw-semibold">onChange<a href="#ctabs-on-change" aria-label="CTabs onChange permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(value: string | number) => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the active tab changes.</p>
<ul>
<li>In controlled mode (<code>{`activeItemKey`}</code> provided), you must update <code>{`activeItemKey`}</code> yourself based on the value received.</li>
<li>In uncontrolled mode, this callback is called after internal state updates.</li>
</ul>
        <JSXDocs code={`<CTabs onChange={(key) => console.log('Tab changed to', key)} />`} />
        </td>
      </tr>
    </tbody>
  </table>
</div>
