# Tabs

A simple tabs component.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { useState } from 'react'
import { Tabs } from '@aragon/ui'

const App = () => {
  const [selected, setSelected] = useState(0)
  return (
    <Tabs
      items={['Orange', 'Pear', 'Cherry']}
      selected={selected}
      onChange={setSelected}
    />
  )
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-616207496f8eba825abf0aa622b093b4c370f115%2FSchermata%202022-06-25%20alle%2022.19.48.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `items` (required) <a href="#items-required" id="items-required"></a>

* Type: `Array` of React nodes

The items that are going to be displayed in every tab.

#### `selected` <a href="#selected" id="selected"></a>

* Type: `Number`
* Default: `0`

The currently selected tab, using its index.

#### `onChange` <a href="#onchange" id="onchange"></a>

* Type: `Function`

When a tab is selected, this function gets called with the index of the tab as a parameter.