Tab components
FREEFree and open-source React tab components built for modern applications and websites. These tabs are built using React Aria and styled with Tailwind CSS.
Installation
You can add this tabs component using our CLI or manually:
npx untitledui add tabs
Tabs examples
Below are examples and variations of this tabs component:
FAQs
Please refer to our frequently asked questions page for more.
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.
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.
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".
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.
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.