tailwind-header-tabs
Version:
`HeaderTabs` is a customizable and accessible React component for displaying tabbed navigation with optional icons, count badges, and multi-tab selection via an auto-complete input.
66 lines (46 loc) • 3.77 kB
Markdown
## HeaderTabs Component
`HeaderTabs` is a customizable and accessible React component for displaying tabbed navigation with optional icons, count badges, and multi-tab selection via an auto-complete input.
### 🛠 Tailwind CSS Setup
> ⚠️ This component library uses [Tailwind CSS](https://tailwindcss.com/) utility classes but **does not include TailwindCSS by default**.
> You must have TailwindCSS configured in your own project for styles to apply correctly.
### ✨ Features
- Customizable icons (function or object)
- Custom badges per tab
- Smooth scroll to selected tab
- Multi-tab selection (optional)
- Auto-complete search for tab selection
### 🛠 Tailwind Setup
To use this component library with Tailwind, add the following to your `tailwind.config.js`:
```js
module.exports = {
content: ["...", "./node_modules/tailwind-header-tabs/**/*.{js,jsx}"],
// other config...
};
```
### Data Structure
The `tabs` prop should follow a recursive `{ id: string; label: string }[]` format, allowing unlimited levels of nesting.
### Example:
```ts
const tabs = [
{ id: "1", label: "Apple" },
{ id: "car", label: "Car" },
{ id: "box", label: "Box" },
];
```
### Props
| Name | Type | Required | Default | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ----------- | ------------------------------------------------------------------- |
| `tabs` | `Tab[]` (i.e., `{ id: string; label: string }[]`) | ✅ | — | List of all tabs. |
| `activeTab` | `Tab \| null` | ✅ | — | Currently selected tab. |
| `onClickTab` | `(tab: Tab) => void` | ✅ | — | Callback when a tab is clicked. |
| `showCountBadges` | `boolean` | ✅ | — | Show numeric badges beside tab labels. |
| `countLabel` | `Record<string, number>` | ❌ | `{}` | Mapping of tab label to count badge. |
| `icons` | `Record<string, React.ReactNode> \| (color?: string, className?: string) => Record<string, React.ReactNode>` | ❌ | `undefined` | Icons for tabs. Can be a static map or function that returns icons. |
| `activeIconColor` | `string` | ❌ | `"#2563eb"` | Color used for active tab icons. |
| `inactiveIconColor` | `string` | ❌ | `"#6b7280"` | Color used for inactive tab icons. |
| `selectable` | `boolean` | ❌ | `false` | Enables selecting multiple tabs using auto-complete input. |