@ciceksepeti/cui-tabs

The Tabs component consists of clickable tabs, that are aligned side by side. Tabs make it easy to explore and switch between different views. Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Installing

Using Npm:

$ npm install @ciceksepeti/cui-tabs

Using Yarn:

$ yarn add @ciceksepeti/cui-tabs

Example

import {
  Tab,
  Tabs,
  TabList,
  TabPanel,
  TabPanelList
} from '@ciceksepeti/cui-tabs';

function Demo() {
  return (
    <Tabs>
      <TabList>
        <Tab>Tab1</Tab>
        <Tab disabled>Tab2</Tab>
        <Tab disabled>Tab3</Tab>
        <Tab>Tab4</Tab>
        <Tab disabled>Tab5</Tab>
      </TabList>
      <TabPanelList>
        <TabPanel>Panel1</TabPanel>
        <TabPanel>Panel2</TabPanel>
        <TabPanel>Panel3</TabPanel>
        <TabPanel>Panel4</TabPanel>
        <TabPanel>Panel5</TabPanel>
      </TabPanelList>
    </Tabs>
  );
}