Skip to content


Tabs make it easy to view and navigate stacked panels of related content. They are especially useful when you need to show a lot of content in a small space.


npm install @nib-components/tabs


import {Tabs, Tab, TabList, TabPanel} from '@nib-components/tabs';

This package contains a number of components built on top of the react-tabs library built by React.


The wrapping component.

This is an implementation of the react-tabs Tabs component.


The list of tabs. The tabs are stacked below our lg breakpoint and inline-flex for screen sizes above this. If tabs do not fit within the container space on one line, tabs become horizontally scrollable.

Gradients are conditionally added to offer visual affordance.

This component is where we add our own custom props for styling.

This is an implementation of the react-tabs TabList component.


The individual tab component.

This is an implementation of the react-tabs Tab component.


The content related to the tab. Only one is visible at a time.

We do not supply any styling to the TabPanel component to support a wide range of implementations.

This is an implementation of the react-tabs TabPanel component.

Interactive demo

Any content 2

Natoque iaculis a id ullamcorper lobortis aliquam magna massa nec ut scelerisque phasellus potenti torquent consectetur natoque.

Ac adipiscing nulla facilisi ullamcorper ut ultricies scelerisque.




The following props are in addition to the react-tabs Tabs props.

subtitlestringA subtitle added below the Tab title. Note: If one Tab uses a subtitle, then all Tabs must use a subtitle.


The following props are in addition to the react-tabs TabList props.

backgroundstringwhite/lightestThe background colour of the TabList. Valid options provided by underlying the Box component. If no background is specified it defaults to white for the default variant and lightest for the container variant.
colorstringThe colour of the TabList. Valid options provided by underlying the Box component.
centerbooleanfalseAbove the lg breakpoint, when tabs do not take up the full width of the TabList they are left-aligned. This cannot be used alongside the fill prop.
fillbooleanfalseAbove the lg breakpoint, we can force the tabs to expand to take up the full width of the TabList by setting the fill prop to true. This cannot be used alongside the center prop.
invertbooleanfalseWhen rendered on a darker background the invert prop can be used to render the TabList in white.
variationstringdefaultAllows for different versions of the tabs. Must be one of default or container.


See react-tabs documentation for Tabs props.


See react-tabs documentation for TabPanel props.


By default, tabs are left aligned (note that this refers to the tab itself and not the tab label and supporting text which are left aligned on mobile and centered above the set desktop breakpoint). Tabs can also be set to centre themselves within the TabList, or can be set to fill the entire horizontal space.

To assist user understanding, as a default, there must always be one tab pre-selected, and the panel below it must be visible. Only a single content panel can be shown at a time. Tabs should always be placed above the content they relate to, never underneath. Additionally, the order of the tabs from left to right should never change, only the content panel should change.

You can use a minimum of two tabs at a time, but should be sure to only use a single row of tabs. Each of these things provide the visual cues and context to help a user understand tabs and their related content.


Tabs has two available variations; thedefault styling and a container style which mimics the tab analogue (an attribute of physical manilla folders). You can change the design of the tabs using the variation prop on the <Tablist /> element.


The default tab style is minimal and we recommend that it should be used in most cases.

It is most often used to seperate content within smaller screen areas or within another component.


Container is an emphasised tab style that is more commonly used for larger content areas and stacking sections of pages.

Responsive design

Above the lg breakpoint, tabs are displayed inline. If they do not fit within the viewport they are horizontally scrollable, with a gradient displayed as a visual cue to show the user there is more content available.

On screens below the lg breakpoint, tabs are vertically stacked.


Tabs should not include icons - we do not currently support adding icons to communicate the type of content a tab represents.

Touch UI

The tap area of the tabs are above the minimum recommended size requirements as referenced in Apple's Human Interface Guidelines.


Tab labels should provide clear and concise explanations of the content within. They should be no longer than one or two words and should be accurate in their description.

Each tab's content is independently categorised and mutually exclusive of the content of other tabs. Be sure to check your tabs make sense when read in isolation, especially in the context of screen reader usage.

Supporting text

In most cases we discourage the use of supporting text as the label itself should be well considered and provide enough context to the user. However if the supporting text is implemented (using the subtitle prop), then it should always be used to directly support the context of the label.


If you are using a screen reader with Javascript turned on, you should be able to navigate the tabs pattern in the following way:

  • You can use left/right arrow, or up/down arrow to switch tabs
  • You can also use the TAB key to focus the tabs

The tab panel should have a heading to reduce confusion for people using screen readers, though this heading can be visually hidden.