React Tab Ui

A simple tab ui component for react. It is built on top of Headless UI and it is completely customizable. By default it comes with no styles, so you can customize it to your needs.

Installation

npm install react-tab-ui

Import

import { ReactTab } from "react-tab-ui";

Usage

The component takes two props, tabHead and tabData. tabHead is an array of strings and tabData is an array of react components. The length of both arrays should be the same.

<ReactTab
  tabHead={["Tab 1", "Tab 2", "Tab 3"]}
  tabData={["Tab 1 Content", "Tab 2 Content", "Tab 3 Content"]}
/>

Props

| Prop Name | Type | Description | | ----------- | ------- | ------------------------------------------------------------------------------------ | | tabHead | array | An array of strings. The length of the array should be the same as tabData. | | tabData | array | An array of react components. The length of the array should be the same as tabHead. | | rememberTab | boolean | If true, the tab will remember the last active tab. Default is false. | | selectedTab | number | The index of the tab that should be selected. Default is 0. | | insertHTML | boolean | If true, the tabData will be rendered as HTML. Default is false. |

More Examples

Render Components

import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import Tab3 from "./Tab3";

<ReactTab
  tabHead={["Tab 1", "Tab 2", "Tab 3"]}
  tabData={[<Tab1 />, <Tab2 />, <Tab3 />]}
/>;

Remember Last Active Tab

<ReactTab
  tabHead={["Tab 1", "Tab 2", "Tab 3"]}
  tabData={["Tab 1 Content", "Tab 2 Content", "Tab 3 Content"]}
  rememberTab={true}
/>

// The tab will remember the last active tab

Set Default Active Tab

<ReactTab
  tabHead={["Tab 1", "Tab 2", "Tab 3"]}
  tabData={["Tab 1 Content", "Tab 2 Content", "Tab 3 Content"]}
  selectedTab={2}
/>

// The third tab will be selected by default

Render HTML

<ReactTab
  tabHead={["Tab 1", "Tab 2", "Tab 3"]}
  tabData={[
    "<h1>Tab 1 Content</h1>",
    "<h1>Tab 2 Content</h1>",
    "<h1>Tab 3 Content</h1>",
  ]}
  insertHTML={true}
/>

// The tabData will be rendered as HTML

Styling

This is the default styling of the component. You can customize it to your needs.

:root {
  --dark-bg-zinc-900: #18181b; /* Dark mode background color */
  --dark-border-zinc-700: #31313a; /* Dark mode border color */
  --dark-text-zinc-200: #ccc; /* Dark mode text color */
}

/* .tabList */
.tabList {
  padding: 0.75rem;
  display: flex;
  gap: 0.25rem;
  background-color: #f3f4f6;
  border-radius: 8px;
  overflow-x: auto;
}

/* .tabListButton */
.tabListButton {
  font-weight: normal;
  white-space: nowrap;
  outline: none;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 0.3125rem;
  line-height: 1.25rem;
}

/* .tabListButtonSelected */
.tabListButtonSelected {
  background-color: #aee4fd;
  color: #0b74dd;
}

/* .tabListButtonUnSelected */
.tabListButtonUnSelected {
  color: black;
}

/* .tabPanelContainer */
.tabPanelContainer {
  margin-top: 0.5rem;
  height: auto;
  width: 100%;
  overflow: auto;
}

/* .tabPanel */
.tabPanel {
  padding: 0.75rem;
  background: #f3f4f6;
  border-radius: 8px;
}