# Tab components

Free and open-source React tab components built for modern applications and websites. These tabs are built using React Aria and styled with Tailwind CSS.

- [GitHub](https://github.com/untitleduico/react/tree/main/components/application/tabs)
- [React Aria](https://react-spectrum.adobe.com/react-aria/Tabs.html)
- [Figma](/content/components/horizontal-tabs/index.html)

## [Installation](/content/react/components/tabs#installation/index.html)

You can add this tabs component using our CLI or manually:

CLI

```
npx untitledui@latest add tabs
```

## [Tabs examples](/content/react/components/tabs#tabs-examples/index.html)

Below are examples and variations of this tabs component:

## FAQs

Please refer to our [frequently asked questions](/content/faqs/index.html) page for more.

### How do I handle tab selection programmatically?

You can control tab selection using the `selectedKey` and `onSelectionChange` props on the `Tabs` component. This allows you to manage the selected tab state in your application logic and respond to tab changes.

### Can I add badges to tabs?

Yes, you can add badges to tabs using the `badge` prop on individual `Tabs.Item` components. The badge accepts numbers or strings and automatically adjusts its color based on the tab's selection state.

### What sizes are available for tabs?

Tabs support two sizes: `"sm"` (small) and `"md"` (medium). You can set the size using the `size` prop on the `Tabs.List` component. The default size is `"sm"`.

### How do I make tabs take full width?

You can make tabs take the full width of their container by setting the `fullWidth` prop to `true` on the `Tabs.List` component. This distributes the tabs evenly across the available space.

### Are the tabs accessible?

Yes, the tabs component is built with accessibility in mind using React Aria. It supports keyboard navigation (arrow keys to navigate, Enter/Space to select), proper ARIA attributes, focus management, and screen reader compatibility.