Tabs

Switch views like a pro with our Tabs. A handy navigator that's all about smooth transitions

Example

Sugarcoat's components have a highly FlexBoxible API, providing an extensive list of props for customization to fit your design requirements.

1  import { Tab, Container, FlexBox } from '@sugarcoat/ui';
2
3  <Container size='xs'>
4    <FlexBox gap='3' direction='column' justify='center'>
5      <Tabs defaultTab='first'>
6        <Tabs.List>
7          <Tabs.Item tab="first">Tip 1</Tabs.Item>
8          <Tabs.Item tab="second">Tip 2</Tabs.Item>
9          <Tabs.Item tab="third">Tip 3</Tabs.Item>
10        </Tabs.List>
11
12        <Tabs.Panel tab="first">
13          <p>Sugarcoat's components have a highly FlexBoxible API, providing an extensive list of props for customization to fit your design requirements.</p>
14        </Tabs.Panel>
15
16        <Tabs.Panel tab="second">
17          <p>Consistency is key! Sugarcoat allows you to maintain consistent styling across your application, thanks to its theming support.</p>
18        </Tabs.Panel>
19
20        <Tabs.Panel tab="third">
21          <p>Need to manage complex states? Sugarcoat components like Select or Dialog handle their own state internally, but also give you the option to control state externally when needed.</p>
22        </Tabs.Panel>
23      </Tabs>
24    </FlexBox>
25  </Container>
26

API Reference

It builds on top of Radix-UI Tabs

Component	Description
Tabs	The Tabs component serves as a container for a set of tabbed content. It manages the state of which tab is active and displays the content for the active tab.
Tabs.List	This is the container for the tab navigation items. It provides the layout and manages the selection of the tabs.
Tabs.Item	This component represents a single tab item. When clicked, it activates its associated tab panel.
Tabs.Panel	This is the content container associated with a Tab. It is shown when its corresponding Tab is active.

Component Properties

Tabs

Prop	Type	Default	Explanation
`size`	`string`	md	Determines the size of the tabs. Options include sm (small), md (medium), and lg (large), which affect the padding and font size of the tabs.
`color`	`string`	default	Sets the overall padding and font size of the table. sm creates a small table with reduced padding and font size, md sets medium padding and font size, and lg sets large padding and font size.
`style`	`string`	default	Specifies the visual style of the tabs. Options include default and pills. default style presents tabs with a classic underlined design, while pills style represents each tab as a rounded rectangular shape, reminiscent of a pill.
`activeTab`	`string`		If using a controlled state, this prop determines which tab is currently active. The value corresponds to the tab's unique identifier.
`defaultTab`	`string`		If the Tabs component is not controlled via the activeTab prop, defaultTab sets the tab that is active by default on initial render.
`onTabChange`	`function`		This callback function is called whenever a new tab is activated. It receives the unique identifier of the newly activated tab.
`orientation`	`string`	horizontal	Defines the orientation of the tabs. Options are horizontal (tabs are laid out in a horizontal row) and vertical (tabs are laid out in a vertical column).
`activationMode`	`string`	automatic	Determines how tabs are activated. Options are automatic (tabs are activated when they receive focus) or manual (tabs are activated when clicked).

Tabs.Item

Prop	Type	Default	Explanation
`tab`	`string`		This is a string that serves as the identifier for the tab item. It corresponds to the activeTab or defaultTab value set in the Tabs parent component.
`disabled`	`boolean`	false	A boolean property that, when set to true, disables the tab item. This prevents users from interacting with it.

Tabs.Panel

Prop	Type	Default	Explanation
`tab`	`string`		This is a string that serves as the identifier for the tab panel. This should match the corresponding 'tab' value given in Tabs.Item for which this panel's content is intended.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius