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.
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.