Theming

The Tabs component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Component Style page.

Anatomy

• A: root
• B: tab
• C: tablist
• D: tabpanels
• E: tabpanel

Theming properties

The properties that affect the theming of the Tabs component are:

• variant: The visual variant of the component. Defaults to line.
• size: The size of the component. Defaults to md.
• colorScheme: The color scheme of the component. Defaults to blue.

Theming utilities

• createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
• definePartsStyle: a function used to create multipart style objects.
• defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

import { tabsAnatomy } from "@chakra-ui/anatomy";
import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(tabsAnatomy.keys);

Customizing the default theme

import { tabsAnatomy } from "@chakra-ui/anatomy";
import { createMultiStyleConfigHelpers } from "@chakra-ui/react";

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(tabsAnatomy.keys);

// define the base component styles
const baseStyle = definePartsStyle({
  // define the part you're going to style
  tab: {
    fontWeight: "semibold", // change the font weight
  },
  tabpanel: {
    fontFamily: "mono", // change the font family
  },
});

// export the component theme
export const tabsTheme = defineMultiStyleConfig({ baseStyle });

After customizing the the Tabs theme, we can import it in our theme file and add it in the components property.

import { extendTheme } from "@chakra-ui/react";
import { tabsTheme } from "./components/Tabs";

const theme = extendTheme({
  components: {
    Tabs: tabsTheme,
  },
});

export default theme;

Adding a custom size

Let's assume we want to include an extra large tab size. Here's how we can do that:

import { tabsAnatomy } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers } from '@chakra-ui/react';

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(tabsAnatomy.keys);

// define custom sizes
const sizes = {
  xl: definePartsStyle({
    // define the parts that will change for each size
    tab: {
      fontSize: 'xl',
      py: '4',
      px: '6',
    },
    tabpanel: {
      py: '4',
      px: '6',
    },
  }),
};

// export the component theme
export const tabsTheme = defineMultiStyleConfig({ sizes });

// now we can use the new `xl` size
<Tabs size="xl" ... />

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant

Let's assume we want to include a custom variant that is fully enclosed and can have a color scheme applied. Here's how we can do that:

import { tabsAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
import { mode } from '@chakra-ui/theme-tools' // import utility to set light and dark mode props

// define a custom variant
const colorfulVariant = definePartsStyle((props) => {
  const { colorScheme: c } = props // extract colorScheme from component props

  return {
    tab: {
      border: '2px solid',
      borderColor: 'transparent',
      // use colorScheme to change background color with dark and light mode options
      bg: mode(`${c}.300`, `${c}.600`)(props),
      borderTopRadius: 'lg',
      borderBottom: 'none',
      _selected: {
        bg: mode('#fff', 'gray.800')(props),
        color: mode(`${c}.500`, `${c}.300`)(props),
        borderColor: 'inherit',
        borderBottom: 'none',
        mb: '-2px',
      },
    },
    tablist: {
      borderBottom: '2x solid',
      borderColor: 'inherit',
    },
    tabpanel: {
      border: '2px solid',
      borderColor: 'inherit',
      borderBottomRadius: 'lg',
      borderTopRightRadius: 'lg',
    },
  }
})

const variants = {
  colorful: colorfulVariant,
}

// export the component theme
export const tabsTheme = defineMultiStyleConfig({ variants })

// now we can use the `colorful` variant with a different color Scheme
<Tabs variant="colorful" colorScheme="purple" ... />

Changing the default properties

Let's assume we cant to change the default size, variant, and color scheme of every tab in our app. Here's how we can do that:

import { tabsAnatomy } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers } from '@chakra-ui/react';

// define which sizes, variants, and color schemes are applied by default
const defaultProps = {
  size: 'xl',
  variant: 'colorful',
  colorScheme: 'green',
};

// export the component theme
export const tabsTheme = defineMultiStyleConfig({ defaultProps })

// This saves you time, instead of manually setting the
// size and variant every time you use a tabs component:
<Tabs size="xl" variant="colorful" colorScheme="green" ... />

Showcase

import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import Tabs from "./tabs";
import { tabsTheme } from "./tabs-theme";

const theme = extendTheme({
  components: {
    Tabs: tabsTheme,
  }
});

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <Tabs />
    </ChakraProvider>
  );
}

export default App;