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
• React Aria
• Figma

Installation

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

CLI

npx untitledui@latest add tabs

Tabs examples

Below are examples and variations of this tabs component:

FAQs

Please refer to our frequently asked questions 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.