Tabs

The following tabs component is a single component which takes in an array of tabs and displays them. It can be heavily customized where you can style the tabs themselves via itemClassName or the container too. Further functionality or styles can be added on top of this exisiting markup of the component.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Tabs from './components/tabs';

const App = () => {
  const tabData = [
    { label: 'Home' },
    { label: 'About' },
    { label: 'Services' },
    { label: 'Contact' },
  ];

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">My Website</h1>
      <Tabs
        tabs={tabData}
        itemClassName="text-lg" // Class for the tabs
        className="my-4" // Additional class for the tab container
        variant="outline" // Change to "default", "rounded", or any other variant you define
      />
      {/* Here you can render the content based on the active tab */}
    </div>
  );
};

export default App;

Component

tabs.jsx

import React, { useState } from 'react';

const Tab = ({ label, isActive, onClick, itemClassName, variant }) => {
  const baseStyle = "px-4 py-2 rounded-md transition-colors duration-300";

  const styles = {
    default: {
      active: "bg-blue-600 text-white",
      inactive: "text-gray-600 hover:bg-gray-200",
    },
    outline: {
      active: "border border-blue-600 text-blue-600",
      inactive: "border border-gray-300 text-gray-600 hover:bg-gray-200",
    },
    rounded: {
      active: "bg-blue-600 text-white rounded-full",
      inactive: "text-blue-600 hover:bg-blue-200 rounded-full",
    },
  };

  return (
    <button
      onClick={onClick}
      className={`${baseStyle} ${isActive ? styles[variant].active : styles[variant].inactive} ${itemClassName}`}
    >
      {label}
    </button>
  );
};

const Tabs = ({ tabs, itemClassName = '', className = '', variant = 'default' }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div className={`flex space-x-4 ${className}`}>
      {tabs.map((tab, index) => (
        <Tab
          key={index}
          label={tab.label}
          isActive={index === activeIndex}
          onClick={() => setActiveIndex(index)}
          itemClassName={itemClassName}
          variant={variant}
        />
      ))}
    </div>
  );
};

export default Tabs;