@rc-component/tabs

_{Part of the Ant Design ecosystem.}

📑 Flexible React tabs with overflow, editable items, custom tab bars, and accessible panels.

English | 简体中文

Highlights

• Supports top, bottom, left, and right tab positions with RTL layouts.
• Handles overflow with a dropdown operation menu.
• Supports editable tabs, extra tab bar content, indicators, and custom tab bars.
• Provides semantic classNames and styles slots for panel and navigation customization.

Install

npm install @rc-component/tabs

Usage

import Tabs from '@rc-component/tabs';
import '@rc-component/tabs/assets/index.css';

const items = [
  { key: 'overview', label: 'Overview', children: 'Overview content' },
  { key: 'settings', label: 'Settings', children: 'Settings content' },
];

export default () => <Tabs items={items} defaultActiveKey="overview" />;

Online preview: https://tabs.react-component.vercel.app/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Tabs

Name	Type	Default	Description
activeKey	string	-	Controlled active tab key.
animated	boolean | AnimatedConfig	{ inkBar: true, tabPane: false }	Animation config.
className	string	-	Additional class name.
classNames	Partial<Record<SemanticName, string>>	-	Semantic class names.
defaultActiveKey	string	-	Initial active tab key.
destroyOnHidden	boolean	false	Destroy inactive tab panels.
direction	'ltr' | 'rtl'	'ltr'	Layout direction.
editable	EditableConfig	-	Editable tab configuration.
getPopupContainer	(node: HTMLElement) => HTMLElement	-	Popup container resolver.
id	string	-	Root id.
indicator	{ size?: GetIndicatorSize; align?: 'start' | 'center' | 'end' }	-	Indicator size and alignment.
items	Tab[]	[]	Tab items.
locale	TabsLocale	-	Accessibility locale text.
more	MoreProps	-	Overflow dropdown config.
onChange	(activeKey: string) => void	-	Triggered when active tab changes.
onTabClick	(activeKey, event) => void	-	Triggered when a tab is clicked.
onTabScroll	({ direction }) => void	-	Triggered when tab navigation scrolls.
prefixCls	string	'rc-tabs'	Prefix class name.
renderTabBar	RenderTabBar	-	Custom tab bar renderer.
style	React.CSSProperties	-	Root style.
styles	Partial<Record<SemanticName, React.CSSProperties>>	-	Semantic styles.
tabBarExtraContent	React.ReactNode | TabBarExtraMap	-	Extra content beside the tab bar.
tabBarGutter	number	0	Gap between tabs.
tabBarStyle	React.CSSProperties	-	Tab bar style.
tabPosition	'left' | 'right' | 'top' | 'bottom'	'top'	Tab position.

Tab

Name	Type	Default	Description
children	React.ReactNode	-	Tab panel content.
className	string	-	Panel class name.
closable	boolean	-	Whether the tab can be closed in editable mode.
closeIcon	React.ReactNode	-	Custom close icon.
destroyOnHidden	boolean	false	Destroy inactive panel.
disabled	boolean	false	Disable the tab.
forceRender	boolean	false	Render panel before it becomes active.
key	string	-	Required unique tab key.
label	React.ReactNode	-	Tab label.
style	React.CSSProperties	-	Panel style.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/tabs is released under the MIT license.