Tabs
Overview content goes here.
Features content goes here.
Specifications content goes here.
The Tabs component lets users switch between different views or sections of content within the same page, without navigating away. It’s the right pattern when content is related but needs to be divided into smaller, manageable sections — think product details, settings panels, or data views.
Use Tabs when you want to organise related content into separate sections in the same context, let users move between views without leaving the page, and keep complex or lengthy interfaces clear. Skip them when sections aren’t closely related, when users need to compare content side by side, or when the number of tabs would itself become a navigation problem.
The implementation follows the WAI-ARIA Tabs pattern: role="tablist", role="tab", role="tabpanel", aria-selected, and the standard keyboard model (arrows to move focus between tabs, Home/End to jump, Enter or Space to activate, Tab to enter the active panel). The component handles overflow on narrow viewports, supports neutral and contrast schemes, and ships with interactive recipe demos that show real keyboard handling.
Full anatomy, schemes, states, and accessibility guidance live on the Tabs documentation page.