# Tabs
Tabs separate related content into groups within a single context.
## Basic Usage
To implement the Tabs component, you need to import it first:
```js
import { Tabs, TabsItem } from '@react-ui-org/react-ui';
```
And use it:
```docoff-react-preview
React.createElement(() => {
const [activeTab, setActiveTab] = React.useState(1);
const navigate = (event, tab) => {
setActiveTab(tab);
event.preventDefault();
};
return (
navigate(e, 1)}
/>
navigate(e, 2)}
/>
navigate(e, 3)}
/>
);
})
```
See [API](#api) for all available options.
## General Guidelines
- **Use tabs to divide similar content.** Tabs make sense when the content they
contain is related.
- **Make sure everything necessary** to complete a single task is contained
within one tab. Users don't like switching context to get their task done.
- **Make labels short and clear.** Long tab names impede comprehension. Use as
few words as possible, preferably just one.
- **Limit the number of tabs.** Having too many tabs increases clutter and
can be overwhelming for users. Try to have no more than 5 or 6 tabs.
## Tabs with Icons
Tab titles can be accompanied by icons. Once you decide to have icons, use one
for each tab and don't leave some tabs without an icon.
```docoff-react-preview
React.createElement(() => {
const [activeTab, setActiveTab] = React.useState(1);
const navigate = (event, tab) => {
setActiveTab(tab);
event.preventDefault();
};
return (
}
href="#design"
isActive={activeTab === 1}
label="Design"
onClick={(e) => navigate(e, 1)}
/>
}
href="#code"
isActive={activeTab === 2}
label="Code"
onClick={(e) => navigate(e, 2)}
/>
}
href="#resources"
isActive={activeTab === 3}
label="Resources"
onClick={(e) => navigate(e, 3)}
/>
);
});
```
## Scrollable Tabs
If you have more than a few tabs, you may need to make sure they will be all
accessible no matter the space they have around. Wrap Tabs into
[ScrollView](/components/ScrollView) to make them scrollable if necessary.
```docoff-react-preview
React.createElement(() => {
const [activeTab, setActiveTab] = React.useState(1);
const navigate = (event, tab) => {
setActiveTab(tab);
event.preventDefault();
};
return (
);
})
```
## Forwarding HTML Attributes
In addition to the options below in the [component's API](#api) section, you
can specify **any HTML attribute you like.** All attributes that don't
interfere with the API of the React component and that aren't filtered out by
[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to:
- the root `