Explain Tabs Component in React

Building user interfaces often comes down to presenting information in a clean and structured way. Over the years, I’ve noticed that tabs are one of the most effective patterns to organize related content without overwhelming the user.

When I first started working on large-scale applications in the USA, I saw how messy dashboards could get. Instead of endless scrolling, tabs allowed me to group content into sections that users could easily switch between.

In this tutorial, I’ll show you exactly how I build React Tabs Components in different ways. I’ll share complete code for every method and explain each step in simple terms. Whether you’re building an admin dashboard, a product page, or a learning portal, you’ll find these examples practical and reusable.

Method 1 – Build a Basic Tabs Component with React State

The simplest way to create tabs in React is by using the useState hook. This method is great for beginners and works perfectly for small projects.

Full Code

import React, { useState } from "react";

function Tabs() {
  const [activeTab, setActiveTab] = useState("overview");

  return (
    <div>
      <div style={{ display: "flex", gap: "10px", marginBottom: "20px" }}>
        <button
          onClick={() => setActiveTab("overview")}
          style={{
            padding: "10px",
            background: activeTab === "overview" ? "#007BFF" : "#f1f1f1",
            color: activeTab === "overview" ? "#fff" : "#000",
            border: "none",
            cursor: "pointer"
          }}
        >
          Overview
        </button>
        <button
          onClick={() => setActiveTab("details")}
          style={{
            padding: "10px",
            background: activeTab === "details" ? "#007BFF" : "#f1f1f1",
            color: activeTab === "details" ? "#fff" : "#000",
            border: "none",
            cursor: "pointer"
          }}
        >
          Details
        </button>
        <button
          onClick={() => setActiveTab("reviews")}
          style={{
            padding: "10px",
            background: activeTab === "reviews" ? "#007BFF" : "#f1f1f1",
            color: activeTab === "reviews" ? "#fff" : "#000",
            border: "none",
            cursor: "pointer"
          }}
        >
          Reviews
        </button>
      </div>

      <div>
        {activeTab === "overview" && <p>This is the overview content.</p>}
        {activeTab === "details" && <p>Here are the detailed specifications.</p>}
        {activeTab === "reviews" && <p>Customer reviews appear here.</p>}
      </div>
    </div>
  );
}

export default Tabs;

You can see the output in the screenshot below.

Here, I used useState to keep track of the active tab. Each button updates the state, and the content changes based on the selected tab.

Method 2 – Create a Reusable Tabs Component

In real-world projects, I prefer making a reusable component so I can plug it into multiple pages. This method uses props and children for flexibility.

Full Code

import React, { useState } from "react";

function Tab({ label, isActive, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        padding: "10px",
        marginRight: "10px",
        background: isActive ? "#28a745" : "#f1f1f1",
        color: isActive ? "#fff" : "#000",
        border: "none",
        cursor: "pointer"
      }}
    >
      {label}
    </button>
  );
}

function Tabs({ children }) {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div>
      <div style={{ display: "flex", marginBottom: "20px" }}>
        {children.map((child, index) => (
          <Tab
            key={index}
            label={child.props.label}
            isActive={index === activeIndex}
            onClick={() => setActiveIndex(index)}
          />
        ))}
      </div>
      <div>{children[activeIndex]}</div>
    </div>
  );
}

function App() {
  return (
    <Tabs>
      <div label="Home">Welcome to the Home tab.</div>
      <div label="Profile">This is the Profile tab.</div>
      <div label="Settings">Adjust your settings here.</div>
    </Tabs>
  );
}

export default App;

You can see the output in the screenshot below.

This version separates the Tab button from the Tabs container. It makes the component reusable because you can pass any content as children.

Method 3 – Tabs with React Context API

When tabs are part of a larger app, I often use the Context API to avoid prop drilling. This makes the state accessible to all tab components.

Full Code

import React, { createContext, useContext, useState } from "react";

const TabContext = createContext();

function TabProvider({ children }) {
  const [activeTab, setActiveTab] = useState("dashboard");
  return (
    <TabContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabContext.Provider>
  );
}

function TabList({ tabs }) {
  const { activeTab, setActiveTab } = useContext(TabContext);
  return (
    <div style={{ display: "flex", marginBottom: "20px" }}>
      {tabs.map((tab) => (
        <button
          key={tab}
          onClick={() => setActiveTab(tab)}
          style={{
            padding: "10px",
            marginRight: "10px",
            background: activeTab === tab ? "#17a2b8" : "#f1f1f1",
            color: activeTab === tab ? "#fff" : "#000",
            border: "none"
          }}
        >
          {tab}
        </button>
      ))}
    </div>
  );
}

function TabPanel({ name, children }) {
  const { activeTab } = useContext(TabContext);
  return activeTab === name ? <div>{children}</div> : null;
}

function App() {
  return (
    <TabProvider>
      <TabList tabs={["dashboard", "reports", "settings"]} />
      <TabPanel name="dashboard">Dashboard content goes here.</TabPanel>
      <TabPanel name="reports">Reports section with charts.</TabPanel>
      <TabPanel name="settings">Settings for your account.</TabPanel>
    </TabProvider>
  );
}

export default App;

You can see the output in the screenshot below.

With Context, I can manage the active tab globally. This is useful when multiple components need to know which tab is active.

Method 4 – Use Material UI Tabs (Pre-Built Component)

For enterprise apps in the USA, I often rely on Material UI (MUI) because it provides polished and accessible components out of the box.

Full Code

import React from "react";
import { Tabs, Tab, Box } from "@mui/material";

function MuiTabsExample() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: "100%" }}>
      <Tabs value={value} onChange={handleChange}>
        <Tab label="Summary" />
        <Tab label="Analytics" />
        <Tab label="Reports" />
      </Tabs>
      {value === 0 && <Box p={3}>Summary Content</Box>}
      {value === 1 && <Box p={3}>Analytics Content</Box>}
      {value === 2 && <Box p={3}>Reports Content</Box>}
    </Box>
  );
}

export default MuiTabsExample;

Material UI gives us a ready-to-use Tabs component with accessibility and styling built in. It’s best for professional applications where design consistency matters.

Best Practices for Tabs in React

• Always ensure keyboard accessibility (users should navigate tabs with the arrow keys).
• Use clear labels like “Overview,” “Reports,” instead of vague terms.
• Keep tab content lightweight—avoid loading huge data sets inside a single tab.
• For SEO, remember that only the active tab content is visible to crawlers unless you render all tabs in the DOM.

Conclusion

Tabs are one of those UI components that look simple but add huge value to the user experience. Over the years, I’ve used them in dashboards, e-commerce product pages, and even learning platforms.

In this tutorial, I showed you four ways to build tabs in React:

1. A simple useState version.
2. A reusable component with props.
3. A scalable Context API approach.
4. A pre-built Material UI solution.

Each method has its place depending on your project size and complexity. Start with the basic version if you’re learning, and move to Context or MUI when you’re building larger apps.

You may also like to read:

• React cannot update a component while rendering a different component
• How to Use React Component with Children
• React Component Lifecycle Methods with Examples
• Pass Props to a Component in React

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/