tailwind-header-tabs

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.