Tabs Theme

Overview

The tabs component theme is a collection of Tailwindcss utilities that can be used to create tabs components with different colors, styles, and variants. Tabs components are used to allow users to navigate between different sections of content.

Installation

To install the tabs component theme, run the following command:

npm install @tailus/themer-tabs

Variants

The tabs component theme provides four variants:

• default: The default tabs variant.
• outlined: The outlined tabs variant.
• soft: The soft tabs variant.
• bottomIndicator: The bottom indicator tabs variant.

Importation

To import the tabs component theme, you can use the following import:

import { tabs } from "@tailus/themer-tabs";
import { outlinedTabs } from "@tailus/themer-tabs";
import { softTabs } from "@tailus/themer-tabs";
import { bottomIndicatorTabs } from "@tailus/themer-tabs";

Object Structure

Default variant

The object structure for the default variants is as follows:

tabs: {
  list: {
    soft,
    outlined
  },
  indicator: {
    elevated,
    outlined
  },
  trigger: {
    parent,
    icon,
  },
  content,
}

Bottom Indicator Variant

The object structure for the bottom indicator variants is as follows:

tabs: {
  list,
  indicator,
  trigger: {
    parent,
    icon,
  },
  content,
}

Soft and Outlined variants

The object structure for the soft and outlined variants is as follows:

tabs: {
    list: {
        xs,
        sm,
        md,
        lg,
        xl,
        xxl,
        xxxl,
    },
    trigger: {
        parent: {
            primary,
            secondary,
            accent,
            gray,
            neutral,
        },
        icon: {
            xs,
            sm,
            md,
            lg,
            xl,
            xxl,
            xxxl,
        },
    },
    content,
}

Usage

To use the tabs component theme, simply import the appropriate variant and add the appropriate variant object to the tabs element and its child elements. For example, to create a default tabs component, you would import the tabs variant and add the tabs object properties to the tabs element.

Radix UI

import * as Tabs from "@radix-ui/react-tabs";
import { tabs as tabsTheme } from "@tailus/themer-tabs";

function moveTabIndicator(): void {}

moveTabIndicator();

const TabsAppUI = () => (
    <Tabs.Root
        className="w-[22rem] flex flex-col"
        defaultValue="nike"
        onValueChange={moveTabIndicator}
    >
        <Tabs.List className={tabsTheme.list.soft + " w-max"} aria-label="stores" id="ecommerce">
            <span id="indicator" className={tabsTheme.indicator.elevated} aria-hidden="true"></span>
            <Tabs.Trigger className={tabsTheme.trigger.parent} value="nike">
                Nike
            </Tabs.Trigger>
            <Tabs.Trigger className={tabsTheme.trigger.parent} value="adidas">
                Adidas
            </Tabs.Trigger>
            <Tabs.Trigger className={tabsTheme.trigger.parent} value="puma">
                Puma
            </Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content className={tabsTheme.content} value="nike">
            Nike
        </Tabs.Content>
        <Tabs.Content className={tabsTheme.content} value="adidas">
            Adidas
        </Tabs.Content>
        <Tabs.Content className={tabsTheme.content} value="puma">
            Puma
        </Tabs.Content>
    </Tabs.Root>
);

export default TabsAppUI;

Customization

The following properties can be customized for all variants:

• list light border color
• list dark border color
• list light bg
• list dark bg
• indicator dark bg
• border radius

The following properties can be customized for the bottom indicator variant:

• bottom indicator light bg
• bottom indicator dark bg

tailus: {
    components: {
        tabs: {
            bottomIndicatorBg : "primary.600",
            borderColor : "200",
            list : {
                borderRadius : "xl",
                background : "100"
            },
            trigger : {
                borderRadius : "md",
                background : "200"
            },
            dark : {
                borderColor : "800",
                indicatorBackground : "950"
                bottomIndicatorBg : "primary.400",
                list : {
                    background : "800"
                },
                trigger : {
                    background : "800"
                }
            }
        },
    },
},