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
Name | Type | Description | Required | Default Value |
---|---|---|---|---|
items | Array<{ label: string, icon?: React.ReactNode, content: React.ReactNode }> | Array of tab items with labels, optional icons, and content | Yes | - |
activeTabIndex | number | Index of the currently active tab | Yes | - |
onChangeIndexTab | (index: number) => void | Callback function when tab selection changes | Yes | - |
size | "xs" | "sm" | "md" | "lg" | "xl" | Size of the tabs | No | "md" |
insetTab | boolean | Whether to apply inset styling to the tab buttons | No | false |
insetContent | boolean | Whether to apply inset styling to the content area | No | false |
tabLabelStyle | React.CSSProperties | Custom styles to apply to the tab labels | No | - |
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⚙️
SettingsUser Profile
This is a complex tab content with multiple elements.
- Name: John Doe
- Email: [email protected]
- Role: Admin
User Settings
Configure your account settings here.
With Inset Styling
👤
Profile⚙️
SettingsUser Profile
This is a complex tab content with multiple elements.
- Name: John Doe
- Email: [email protected]
- Role: Admin
User Settings
Configure your account settings here.