Tabs

Tabs make it easy to explore and switch between different views.

See Reakit for documentation.

Install and import

yarn add @welcome-ui/tabs @xstyled/styled-components prop-types react react-dom styled-components

import { Tabs, useTabState } from '@welcome-ui/tabs'

Default

Set the tab activated by default using selectedId on useTabState.

Tab 1Tab 2Tab 3Tab 4Tab 5
Tab.Panel 1
Show editor

With no border

The border on Tab.List is an inset shadow that you can customize or disable via the boxShadow style prop

Tab 1Tab 2Tab 3Tab 4Tab 5
Tab.Panel 1
Show editor

With a badge

Add badges in tab.

Tab 1 
newTab 2 
oldTab 3
Tab.Panel 2
Show editor

Use another component

Use another component in tab.

Tab 1Tab 2Tab 3
Tab.Panel 1
Show editor

One tab

Active bar doesn't display with only one tab.

Tab 1
Tab.Panel 1
Show editor

Vertical

Set the tab orientation by providing the orientation prop to the tab state

Tab 1Tab 2Tab 3Tab 4
Tab.Panel 2
Show editor

Properties

Tab

Tab.List

Tab.Panel

Dependencies

• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/utils
  ^3.0.0
• - react-flatten-children
  ^1.0.0
• - reakit
  ^1.3.6

Peer dependencies

• - @xstyled/styled-components
  ^2.2.3
• - prop-types
  ^15.7.2
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1