Getting started — installation and the minimal example

Installing react-tabs is intentionally simple so you can focus on UI patterns, not boilerplate. Use npm or yarn to add the package and then import the building blocks: Tabs, TabList, Tab, and TabPanel. The package sets up correct ARIA roles and default keyboard behavior out of the box.

Run one of the following in your project root. These commands install the latest published release and are safe for production:

npm install react-tabs --save
# or
yarn add react-tabs

Minimal working example (uncontrolled):

import React from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

export default function SimpleTabs() {
  return (
    <Tabs>
      <TabList>
        <Tab>First</Tab>
        <Tab>Second</Tab>
        <Tab>Third</Tab>
      </TabList>

      <TabPanel>Content for first tab</TabPanel>
      <TabPanel>Content for second tab</TabPanel>
      <TabPanel>Content for third tab</TabPanel>
    </Tabs>
  );
}

That example uses the library’s default CSS. If you prefer, omit the stylesheet and apply your own classes or styled components. For the official docs and API reference, see the react-tabs homepage and repo links in the backlinks section below.

Accessibility and keyboard navigation

Accessibility is a non-negotiable part of tab interfaces. react-tabs implements required ARIA roles: the tablist, tab, and tabpanel roles are rendered for you, and tab indices and focus management are handled by the library by default. That means screen readers will present the tabs correctly without extra wiring.

Keyboard navigation follows platform conventions: arrow keys move between tabs, Home/End jump to first/last, and Enter/Space activate a tab. For cases where you want manual activation (focus vs. selection), react-tabs supports the forceRenderTabPanel and controlled-selection patterns so you can customize behavior and still honor ARIA.

Quick reference — default keyboard shortcuts:

• Left/Right: move focus between tabs
• Home/End: jump to first/last tab
• Enter/Space: activate the focused tab

When nesting tab groups or embedding tabs inside other interactive components, ensure unique ids on panels if you’re programmatically linking labels to content. The library generates safe ids, but you can supply your own with props like id and tabId if needed for complex UIs.

Controlled tabs: state management and patterns

Use controlled tabs when you need the selected tab to be driven by application state—routing, user preferences, or analytics. react-tabs exposes selectedIndex and onSelect props on the <Tabs> component so you can read and set the active index from your React state.

Controlled mode gives you full ownership: update the selected index from route changes, persist the last-opened tab to localStorage, or animate transitions between panels. Because the library separates focus and selection concerns, you can also implement a manual-activation pattern where focus doesn’t immediately change selection.

Example (controlled):

import React, { useState } from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';

function ControlledExample() {
  const [index, setIndex] = useState(0);
  return (
    <Tabs selectedIndex={index} onSelect={i => setIndex(i)}>
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
      </TabList>
      <TabPanel>Panel 1</TabPanel>
      <TabPanel>Panel 2</TabPanel>
    </Tabs>
  );
}

For voice-search friendly answers: «To control react-tabs, pass selectedIndex and onSelect to the Tabs component and manage the index in React state.»

Styling, customization, and theming

react-tabs ships with a small default stylesheet to get you started, but real applications usually want CSS modules, BEM, or CSS-in-JS. The library exposes class name props and selected state classes you can target. Examples include using className, selectedClassName, and selectedTabClassName to attach your theme-specific styles.

If you use styled-components or emotion, wrap Tab and TabPanel with styled wrappers or use the as prop to render them with your own components. For animated transitions, combine react-tabs with react-transition-group or CSS transitions; render panels conditionally or use forceRenderTabPanel to avoid remounting when animating height.

Example using selected class names:

<TabList className="my-tablist">
  <Tab className="my-tab" selectedClassName="my-tab--active">Tab</Tab>
</TabList>

Keep CSS responsibilities separate: leave focus management and ARIA to react-tabs, and handle only visual styling in your stylesheets. That separation keeps upgrades and accessibility fixes simple.

Advanced patterns: lazy loading, nested tabs, SSR

Large applications need advanced patterns: lazy-loaded panels to reduce initial bundle size, nested tab sets for complex forms, and SSR/SEO considerations when rendering tabbed content server-side. For lazy loading, combine react-tabs with dynamic imports (React.lazy / Suspense) and use placeholders inside TabPanel to avoid layout shifts.

Nesting tabs works out of the box, but be mindful of keyboard scope: nested tab groups should manage focus independently. Ensure each TabList is inside its own Tabs instance and avoid duplicating ids. When server-side rendering, render the default active tab content on the server to ensure crawlers and low-JS clients see meaningful content.

If you want deeper examples and step-by-step advanced patterns, refer to community-driven tutorials and examples such as the one on dev.to for practical recipes and nested patterns.

FAQ

Semantic core (keyword clusters)

Notes: Use these phrases naturally across headings and body copy. Prioritize primary keywords in H1/H2 and the first 100 words, and scatter secondary/LSI phrases in explanatory paragraphs and code captions.