@logicblocks/react-tabs

A customizable React tab component with no built-in CSS — completely style-agnostic and perfect for logic-only UI builds.

---

🚀 Installation

Using npm:

``bash
npm install @logicblocks/react-tabs
`

Using yarn:

`bash
yarn add @logicblocks/react-tabs
`

---

💡 Usage Examples

---

$3

$3

.unselected {
background-color: #f1f1f1;
color: #333;
padding: 8px 16px;
border-radius: 4px 4px 0 0;
border: 1px solid #ccc;
cursor: pointer;
}
`

`tsx
import React, { useState } from 'react';
import { Tab } from '@logicblocks/react-tabs';
import './tabs.css'; // Your own CSS file

const Tab1 = () =>

export default App;
`

---

$3

`tsx
import React, { useState } from 'react';
import { Tab } from '@logicblocks/react-tabs';

const Tab1 = () =>

export default App;
`

---

$3

> 💡 Ensure Tailwind is set up and you're using at least v3.4.0

`tsx
import React, { useState } from 'react';
import { Tab } from '@logicblocks/react-tabs';

const Tab1 = () =>

export default App;
`

---

📦 Props

$3

- tabList: Array of tab configs:
- name (string): Tab label
- Component (React.FC): Component rendered for the tab
- currentTabIndex (number): Currently active tab index

$3

- tabClickHandler: Callback when a tab is clicked — receives index (function)
- selectTabClass: CSS class for the selected tab (string)
- unselectedTabClass: CSS class for unselected tabs (string)
- tabContainerClass: Class for tab wrapper (string)
- tabOptionsClass: Class for tab selector container (string)
- selectTabStyle: Inline style for selected tab
- unselectedTabStyle: Inline style for unselected tabs
- tabContainerStyle: Inline style for outer tab container
- tabOptionsStyle: Inline style for the tab options container

---

🎨 Example CSS

Use your own styles, or start with this:

`css
.tab-container {
display: flex;
flex-direction: column;
}

.tab-options {
display: flex;
border-bottom: 1px solid #ccc;
}

.selected-tab {
padding: 10px 20px;
border: 1px solid #ccc;
border-bottom: none;
cursor: pointer;
background-color: #f9f9f9;
}

.unselected-tab {
padding: 10px 20px;
cursor: pointer;
}
``

---

🤝 Contributing

Contributions are welcome!
Feel free to open an issue or submit a pull request on GitHub.

---

📄 License

MIT License © Anup Agarwal