Tabs Component

ℹ️

The Tabs component is a React component designed for creating tabbed interfaces with various styles and sizes.

Example Preview

Tabs Component Preview

Usage

Import the Tabs component and use it in your React application:

import { Tabs } from "@/@core";
 
const MyTabsComponent = () => {
  const tabsData = [
    {
      label: "Tab 1",
      content: <div>Content for Tab 1</div>,
    },
    {
      label: "Tab 2",
      content: <div>Content for Tab 2</div>,
    },
    {
      label: "Tab 3",
      content: <div>Content for Tab 3</div>,
    },
  ];
 
  return <Tabs tabs={tabsData} />;
};
 
export default MyTabsComponent;

Props

Prop	Type	Default	Description
`tabs`	`Array<{ label: string; content: React.ReactNode }>`	See example	Array of objects representing tabs, each containing a label and corresponding content.
`variant`	`bordered`, `lifted`, `boxed`	`bordered`	Style variant for the tabs.
`size`	`xs`, `sm`, `md`, `lg`	`md`	Size variant for the tabs.
`btnBodyClassName`	`HTMLDivElement['className']`	-	Additional class name for the tab button container.
`btnClassName`	`HTMLDivElement['className']`	-	Additional class name for the tab buttons.
`activeBtnClassName`	`HTMLDivElement['className']`	-	Additional class name for the active tab button.

Additional Props

Refer to the HTMLAttributes<HTMLDivElement> interface for standard HTML div element attributes.

ℹ️

Note: The Tabs component uses the HTMLDivElement element under the hood. You can pass any of the standard HTML div element attributes to the component. For example, you can pass the className prop to add a custom class name to the component. You can also pass the style prop to add custom styles to the component. Refer to the React documentation (opens in a new tab) for a list of all supported HTML div element attributes.

Table Timeline