A Headless And Flexible Tabs Built With React Hooks

Jun 16, 2021
A Headless And Flexible Tabs Built With React Hooks


Headless, simple, and highly flexible tab-like primitives built with react hooks.

View Demo View Github


  • ???? Under 1KB minified and gzipped
  • ???? Bring your own DOM!
  • ✨ Correctly handles dynamic tabs, no more empty tab panels!
  • ????‍♂️ Well suited for complex use cases, like drag and drop!

Getting started


npm install react-headless-tabs


const { activeTab, setActiveTab, TabPanel, } = useTabs(tabs, defaultTab?) tabs: string[]

Strings representing the list of tabs, can be static or dynamic.

defaultTab?: string | null

The tab that should initially be selected (defaults to the first one)


TabPanel: Component

Renders lazily and stays mounted after it has rendered once

activeTab: string | null

The currently selected tab, can be null if there are no tabs or if defaultTab was initialized to null

setActiveTab: (tab: string | null) => void

Update the selected tab, or pass null to select none.