Tabs

A tab bar component for Ink 5. Shows labelled tabs with an active indicator, optional badges, and keyboard navigation support via parent onChange.

Install

npm install @matthesketh/ink-tabs

Usage

import { Tabs } from '@matthesketh/ink-tabs';

const tabs = [
  { id: 'home', label: 'Home' },
  { id: 'logs', label: 'Logs', badge: 3 },
  { id: 'settings', label: 'Settings' },
];

function App() {
  const [activeId, setActiveId] = useState('home');

  return <Tabs tabs={tabs} activeId={activeId} onChange={setActiveId} />;
}

Props

Prop	Type	Default	Description
tabs	Tab[]	required	Array of tab objects
activeId	string	required	ID of the currently active tab
onChange	(id: string) => void	—	Called when a tab should change (parent handles input)
accentColor	string	'cyan'	Colour for the active tab
separator	string	' | '	String rendered between tabs

Tab

Field	Type	Description
id	string	Unique identifier
label	string	Display text
badge	string | number	Optional badge shown as (N) after label

License

MIT