React Tabs Scrollable

React Tabs Scrollable is an open-source React component library that renders scrollable tab bars with built-in RTL support, four configurable scroll modes, and a gzipped size of 3.9 kB.

What is react-tabs-scrollable?

React Tabs Scrollable provides three components — Tabs, Tab, and TabScreen — that together build scrollable tab navigation for React applications. It takes an activeTab index and an onTabClick callback as required props, and renders an accessible, horizontally scrollable tab strip with optional left/right navigation buttons. The library is built with TypeScript, ships with a CSS file (rts.css) you can edit, and is published on npm by developer Mood-al.

Key Features

• RTL support — Set isRTL to true to flip the tab direction for right-to-left languages; this was the original motivation for the library.
• Four scroll modes — Choose scrollSelectedToStart (default), scrollSelectedToCenter, scrollSelectedToEnd, or scrollSelectedToCenterFromView to control how the selected tab is positioned in the viewport.
• Small bundle — The package is 9.6 kB minified and 3.9 kB gzipped.
• TypeScript out of the box — Props and event types are included; the V2 rewrite uses TypeScript for auto-complete.
• Full accessibility — Tab navigation is keyboard-accessible, and the default HTML element can be changed via tabAs and navBtnAs.
• Exposed refs and styles — Every element accepts className and style props, and refs are available for the tabs container, each tab, and both nav buttons.
• Programmatic control — The action ref exposes goToStart(), goToEnd(), onLeftNavBtnClick(), and onRightNavBtnClick() methods.
• TabScreen panels — Use the TabScreen component to pair tab buttons with content panels that appear when the matching activeTab is selected.

Who is it for?

• React developers building navigation — Use Tabs and Tab to create scrollable menus, category lists, or dashboard tabs without writing custom scroll logic.
• Teams shipping RTL interfaces — The built-in isRTL prop handles right-to-left layout out of the box, which is rare in similar components.
• Developers who value small bundle sizes — At 3.9 kB gzipped, it fits projects where every kilobyte counts.
• TypeScript users — The package includes type definitions and is written in TypeScript, so IDE auto-completion works for props and callbacks.

What can you do with react-tabs-scrollable?

• Product dashboards: Create a horizontally scrollable tab bar for filtering widgets or switching between dashboard sections.
• E-commerce category menus: Show hundreds of product categories in a compact, scrollable strip with navigation arrows.
• Documentation sites: Build tabbed code examples or API references where tabs wrap on smaller screens.
• Mobile web apps: Hide the navigation buttons on mobile with hideNavBtnsOnMobile and rely on touch scrolling.

How does react-tabs-scrollable work?

Install the package with npm install --save react-tabs-scrollable or yarn add react-tabs-scrollable, then import Tabs and Tab and include the rts.css file. Pass an activeTab state value and an onTabClick handler that updates that state; the component scrolls the selected tab into view based on the chosen mode. The action ref can invoke navigation methods programmatically, and TabScreen components display content linked to the active tab index.

FAQ

Is react-tabs-scrollable free?

Yes, it is open source and published on npm under a standard open-source license. You can use it in personal and commercial projects, and the GitHub repository accepts feature requests and contributions.

How do I add RTL support?

Set the isRTL prop to true on the Tabs component. The library was originally built because of RTL support, so the scrolling direction and navigation buttons flip automatically to match right-to-left languages.

What does the mode prop do?

The mode prop controls how the selected tab is scrolled into view. The four options are scrollSelectedToStart, scrollSelectedToCenter, scrollSelectedToEnd, and scrollSelectedToCenterFromView. The default is scrollSelectedToStart; the last mode only scrolls when the clicked tab is outside the center area.

Can I control the tabs programmatically?

Yes. Pass a ref to the action prop and then call ref.current.goToStart(), ref.current.goToEnd(), ref.current.onLeftNavBtnClick(), or ref.current.onRightNavBtnClick() from your own buttons or logic.

Does react-tabs-scrollable include a panel component?

Yes, the TabScreen component pairs with Tabs. Give it the same activeTab value and an index that matches a tab's index; it shows its children only when that tab is active. You can also pass a custom className for entrance animations.