UIKitTabs.jsx

import React from "react";
import { Tabs, ButtonGroup, Button } from "@emisgroup/ui-kit-react";

const TabComponent = () => {
    const tabsList = [{ text: "Tab1" }, { text: "Tab2" }, { text: "Tab3" }];
    const [selectedTab, setSelectedTab] = React.useState(0);

    return (
        <>
            <Tabs tabsList={tabsList} activeTab={selectedTab} onTabSelect={setSelectedTab} />
            <div className="tab-display">Selected tab {tabsList[selectedTab].text}</div>
            <ButtonGroup>
                <Button type="button" disabled={selectedTab <= 0} onClick={() => setSelectedTab(selectedTab - 1)}>
                    &lt;&nbsp;Previous
                </Button>
                <Button
                    type="button"
                    disabled={selectedTab >= tabsList.length - 1}
                    onClick={() => setSelectedTab(selectedTab + 1)}
                >
                    Next&nbsp;&gt;
                </Button>
            </ButtonGroup>
        </>
    );
};

export default TabComponent;