Ariakit
/

All things Tab

Components

TabDisplay one panel of content at a time with a tabbed interface. This component is based on the WAI-ARIA Tabs Pattern.

Examples

Tab with React RouterUsing React Router to create Tab links and tab panels controlled by the browser history, while maintaining keyboard navigation.
Tab with Next.js App RouterUsing Next.js Parallel Routes to create accessible Tabs and tab panels that are rendered on the server and controlled by the URL.

API Reference

useTabContextReturns the tab store from the nearest tab container.
useTabStoreCreates a tab store.
TabRenders a tab element. The underlying element must be wrapped in a TabList component.
TabListRenders a tab list element.
TabPanelRenders a tab panel element.
TabProviderProvides a tab store to Tab components.