Tabs

The Tabs component is a wrapper component that maps the string of arrays you pass to its tablinks prop to a child TabMenu component. It renders child elements as 1 tab pane per direct child. The number of children passed to a Tabs component must equal the length of the tabLinks array.

Example Instance

<Tabs tabLinks={tabLabels} activeTab={activeTab} setActiveTab={setActiveTab}>
  {tabLabels.map((label, index) => (
    <TabContent key={index}>
      <p>This is the content for {label}</p>
    </TabContent>
  ))}
</Tabs>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add tabs` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
onActiveTabChange	no	(index: number) => void	Optional function to lift state when the active tab changes	undefined
scrollableContent	no	boolean	Enables scrollable tab content area	undefined
tabLinks	yes	string[]	Array of tab link labels	—

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Supported
Native HTML attributes	Supported