@chakra-ui/tabs

What is @chakra-ui/tabs?

@chakra-ui/tabs is a component library for creating tabbed interfaces in React applications. It provides a set of accessible and customizable tab components that can be used to organize content into separate views, making it easier for users to navigate through different sections of an application.

What are @chakra-ui/tabs's main functionalities?

Basic Tabs

This code demonstrates how to create a basic tabbed interface with three tabs, each containing different content.

```jsx
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/tabs';

function BasicTabs() {
  return (
    <Tabs>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <p>Content for Tab 1</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 2</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 3</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}
```

Vertical Tabs

This code demonstrates how to create a vertical tabbed interface, where the tabs are aligned vertically instead of horizontally.

```jsx
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/tabs';

function VerticalTabs() {
  return (
    <Tabs orientation="vertical">
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <p>Content for Tab 1</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 2</p>
        </TabPanel>
        <TabPanel>
          <p>Content for Tab 3</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}
```

Custom Tab Styling

This code demonstrates how to apply custom styles to the tabs and their content, including changing the background color and text color of the selected tab.

```jsx
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/tabs';
import { Box } from '@chakra-ui/react';

function CustomStyledTabs() {
  return (
    <Tabs>
      <TabList>
        <Tab _selected={{ color: 'white', bg: 'blue.500' }}>Tab 1</Tab>
        <Tab _selected={{ color: 'white', bg: 'blue.500' }}>Tab 2</Tab>
        <Tab _selected={{ color: 'white', bg: 'blue.500' }}>Tab 3</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <Box p={4} bg="gray.100">Content for Tab 1</Box>
        </TabPanel>
        <TabPanel>
          <Box p={4} bg="gray.100">Content for Tab 2</Box>
        </TabPanel>
        <TabPanel>
          <Box p={4} bg="gray.100">Content for Tab 3</Box>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}
```

Other packages similar to @chakra-ui/tabs

react-tabs

react-tabs is a lightweight and accessible React component for creating tabbed interfaces. It offers a simple API and is highly customizable. Compared to @chakra-ui/tabs, react-tabs is more minimalistic and may require additional styling to achieve the same level of polish.

material-ui

Material-UI is a popular React component library that follows Google's Material Design guidelines. It includes a Tabs component that is highly customizable and comes with a wide range of features. Compared to @chakra-ui/tabs, Material-UI offers a more comprehensive set of components and design options, but it may be more complex to set up and use.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It includes a Tab component that allows for the creation of tabbed interfaces. Compared to @chakra-ui/tabs, Semantic UI React provides a more extensive set of UI components and follows the Semantic UI design principles, which may appeal to developers looking for a specific design aesthetic.

README

@chakra-ui/tabs

An accessible tabs component.

The Tab and TabPanel elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

Installation

yarn add @chakra-ui/tabs

# or

npm i @chakra-ui/tabs

Import components

import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react"

Usage

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Tab variants and color schemes

Tabs come in 6 different variants to style the tabs: line,enclosed, enclosed-colored, soft-rounded, solid-rounded. Each variant comes it different color schemes.

<Tabs variant="enclosed" colorScheme="red">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Manually Activated Tabs

By default, Tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

The content of a TabPanel should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.

In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specific tab, users can activate a tab by pressing Space or Enter.

<Tabs isManual variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Tab sizes

You can change the size of the tab by passing size prop. We support 3 sizes sm, md, lg

<Tabs size="md" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>