All things Tab
Components
Examples
Combobox with TabsOrganizing Combobox with Tab components that support mouse, keyboard, and screen reader interactions. The UI remains responsive by using React.startTransition.
Command Menu with TabsCombining Dialog, Tab, and Combobox from Ariakit React to build a command palette component.
Select with Combobox and TabsAbstracting Select to work alongside Combobox and Tab components, presenting a searchable, tabbed dropdown.
Animated TabPanelUsing plain CSS transitions to slide in and out TabPanel components as they are expanded.
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 to control the state of
Tab components.
TabRenders a tab element inside a
TabList wrapper.
TabListRenders a composite tab list wrapper for
Tab elements.
TabPanelRenders a tab panel element that's controlled by a
Tab component.
TabProviderProvides a tab store to Tab components.