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 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:

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:

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. |