Component for building tabs.

The <Tabs> component allows you to organize and navigate between groups of content that are related and at the same level of hierarchy .

The <Tabs.List> component is used within Tabs to group tabs that a user can switch between. The ids of the items within the must match up with a corresponding item inside the .

The <Tabs.Item> component provides a title for an individual item within a TabList.



To import the component you just have to use this code below.

import { Tabs } from '@marigold/components';


variantThe available variants of this component.
sizesmall | medium | largeThe available sizes of this component.


isDisabledbooleanfalseSet All TabPanel disabled
defaultSelectedKeystring1Set the default selected tab
selectedKeystringdefaultSelectedKeyChoose the selected tab
disabledKeysArray of keysnoneDisable particular tabs
gapnumber1Preset the space between the tabs
keyboardActivationautomatic | manualautomaticWhether tabs are activated automatically on focus or manually.
onSelectionChange(key: Key) => any-Callback executed when a new tab is selected.


Disabled Tab

A Tab can be disabled by setting the isabledKeys prop.

Tabs with default selected key

You can choose the selected key by setting the defaultSelectedKEy prop.

You're currently in the Settings tab. Here, you can customize your account preferences, manage privacy settings, and update your notification preferences. Personalize your experience and make the platform work exactly how you want it to.

Large Tabs Controllers

You can change the size of tab controller by setting the size prop.