or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accessibility.mdcomponents.mdindex.mdstate-management.mdstyling.md
tile.json

tessl/npm-react-tabs

An accessible and easy tab component for ReactJS with full keyboard navigation and ARIA support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-tabs@6.1.x

To install, run

npx @tessl/cli install tessl/npm-react-tabs@6.1.0

index.mddocs/

React Tabs

React Tabs is an accessible and easy-to-use tab component system for ReactJS applications. It provides a complete set of composable components (Tabs, TabList, Tab, TabPanel) that work together to create tabbed interfaces with full accessibility support including ARIA compliance and keyboard navigation.

Package Information

  • Package Name: react-tabs
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions
  • Installation: npm install react-tabs or yarn add react-tabs
  • React Compatibility: Requires React ^18.0.0 || ^19.0.0

Core Imports

import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";

For CommonJS:

const { Tabs, TabList, Tab, TabPanel } = require("react-tabs");

Basic Usage

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>
    </TabPanel>
  </Tabs>
);

Architecture

React Tabs is built around four core components that work together:

  • Tabs: Main container component that manages state, handles keyboard navigation, and provides controlled/uncontrolled behavior
  • TabList: Container for Tab components that renders as an accessible <ul> element with role="tablist"
  • Tab: Individual tab elements that render as <li> elements with role="tab" and full ARIA attributes
  • TabPanel: Content areas that render as <div> elements with role="tabpanel" and conditional visibility

The library supports both controlled and uncontrolled modes, allowing developers to either manage tab state internally or externally, with comprehensive validation to ensure proper component structure.

Internal Architecture: The main Tabs component acts as a state management layer that wraps the low-level UncontrolledTabs component. The Tabs component handles mode detection (controlled vs uncontrolled), state initialization, and event delegation, then passes processed props to UncontrolledTabs which handles the actual rendering, keyboard navigation, focus management, and DOM event handling. This separation allows for clean state management while maintaining complex accessibility features.

Capabilities

Core Components

Complete set of accessible React components for building tabbed interfaces with keyboard navigation and ARIA compliance.

const Tabs: React.FunctionComponent<TabsProps>;
const TabList: React.FunctionComponent<TabListProps>;
const Tab: React.FunctionComponent<TabProps>;
const TabPanel: React.FunctionComponent<TabPanelProps>;

Core Components

State Management

Flexible state management supporting both controlled and uncontrolled modes with comprehensive event handling.

interface TabsProps {
  selectedIndex?: number; // Controlled mode
  defaultIndex?: number; // Uncontrolled mode initial index
  onSelect?: (index: number, last: number, event: Event) => boolean | void;
}

State Management

Accessibility Features

Full accessibility support with ARIA compliance, keyboard navigation, and focus management.

interface TabsProps {
  defaultFocus?: boolean; // Focus on initial render
  direction?: 'rtl' | 'ltr'; // Text direction support
  disableUpDownKeys?: boolean; // Keyboard navigation options
  disableLeftRightKeys?: boolean;
}

Accessibility

Styling System

Flexible styling system supporting multiple className formats and default CSS classes.

type ClassNameProp = string | string[] | { [name: string]: boolean };

interface TabsProps {
  className?: ClassNameProp;
  selectedTabClassName?: string;
  selectedTabPanelClassName?: string;
  disabledTabClassName?: string;
}

Styling

Types

interface TabsProps extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'onSelect' | 'ref'> {
  className?: string | string[] | { [name: string]: boolean };
  defaultFocus?: boolean;
  defaultIndex?: number;
  direction?: 'rtl' | 'ltr';
  disabledTabClassName?: string;
  disableUpDownKeys?: boolean;
  disableLeftRightKeys?: boolean;
  domRef?: ((node?: HTMLElement) => void);
  environment?: Window;
  focusTabOnClick?: boolean;
  forceRenderTabPanel?: boolean;
  onSelect?: ((index: number, last: number, event: Event) => boolean | void);
  selectedIndex?: number;
  selectedTabClassName?: string;
  selectedTabPanelClassName?: string;
}

interface TabListProps extends Omit<HTMLProps<HTMLUListElement>, 'className'> {
  className?: string | string[] | { [name: string]: boolean };
}

interface TabProps extends Omit<HTMLProps<HTMLLIElement>, 'className' | 'tabIndex'> {
  className?: string | string[] | { [name: string]: boolean };
  disabled?: boolean;
  disabledClassName?: string;
  selectedClassName?: string;
  tabIndex?: string;
}

interface TabPanelProps extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
  className?: string | string[] | { [name: string]: boolean };
  forceRender?: boolean;
  selectedClassName?: string;
}

interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
  tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
}

Internal Interfaces

interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
  /** Static property used for component validation and identification */
  tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
}