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

<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="ctabpanel-class-name">
        <td className="text-primary fw-semibold">className<a href="#ctabpanel-class-name" aria-label="CTabPanel 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="ctabpanel-item-key">
        <td className="text-primary fw-semibold">itemKey<a href="#ctabpanel-item-key" aria-label="CTabPanel itemKey permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Item key.</p>
        </td>
      </tr>
      <tr id="ctabpanel-on-hide">
        <td className="text-primary fw-semibold">onHide<a href="#ctabpanel-on-hide" aria-label="CTabPanel onHide permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be hidden.</p>
        </td>
      </tr>
      <tr id="ctabpanel-on-show">
        <td className="text-primary fw-semibold">onShow<a href="#ctabpanel-on-show" aria-label="CTabPanel onShow permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be shown.</p>
        </td>
      </tr>
      <tr id="ctabpanel-transition">
        <td className="text-primary fw-semibold">transition<a href="#ctabpanel-transition" aria-label="CTabPanel transition permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Enable fade in and fade out transition.</p>
        </td>
      </tr>
      <tr id="ctabpanel-visible">
        <td className="text-primary fw-semibold">visible<a href="#ctabpanel-visible" aria-label="CTabPanel visible permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the visibility of component.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
