---
description: A tab component that displays an active state.
labels: ['react', 'ui-component', 'component', 'tab']
---

import { Tab } from './tab';

```js live
<Tab>bit</Tab>
```

an active tab

```js live
<div style={{ display: 'flex', alignItems: 'center' }}>
  <Tab isActive>bit</Tab>
</div>
```

multiple tabs with one active

```js live
<div style={{ display: 'flex', alignItems: 'center' }}>
  <Tab isActive>bit</Tab>
  <Tab>npm</Tab>
  <Tab>yarn</Tab>
</div>
```