Skip to main content

Tabs

The Tabs component provides a way to organize content into separate views where only one view is visible at a time, with support for icons and inset styling options.

Basic Usage

import { Tabs, ThemeProvider } from "@carton-org/react-neumorphism";
import { useState } from "react";

const MyComponent = () => {
const [activeTabIndex, setActiveTabIndex] = useState(0);

const items = [
{ label: "Tab 1", content: "Content for Tab 1" },
{ label: "Tab 2", content: "Content for Tab 2" },
{ label: "Tab 3", content: "Content for Tab 3" },
];

return (
<Tabs
items={items}
activeTabIndex={activeTabIndex}
onChangeIndexTab={setActiveTabIndex}
/>
);
};

Live Example

Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3

Props

NameTypeDescriptionRequiredDefault Value
itemsArray<{ label: string, icon?: React.ReactNode, content: React.ReactNode }>Array of tab items with labels, optional icons, and contentYes-
activeTabIndexnumberIndex of the currently active tabYes-
onChangeIndexTab(index: number) => voidCallback function when tab selection changesYes-
size"xs" | "sm" | "md" | "lg" | "xl"Size of the tabsNo"md"
insetTabbooleanWhether to apply inset styling to the tab buttonsNofalse
insetContentbooleanWhether to apply inset styling to the content areaNofalse
tabLabelStyleReact.CSSPropertiesCustom styles to apply to the tab labelsNo-

Examples

Different Sizes

Small Size

Tab 1
Tab 2
Small Tab Content
Small Tab Content

Medium Size

Tab 1
Tab 2
Small Tab Content
Small Tab Content

Large Size

Tab 1
Tab 2
Small Tab Content
Small Tab Content

With Icons and Inset Styling

With Icons

👤
Profile
⚙️
Settings

User Profile

This is a complex tab content with multiple elements.

User Settings

Configure your account settings here.

With Inset Styling

👤
Profile
⚙️
Settings

User Profile

This is a complex tab content with multiple elements.

User Settings

Configure your account settings here.