Tabs

The Tabs component from pol-ui can be used to show a list of tab items that you can click on to change the content inside of the main tabs component using React state reactivity.

Importation

Import the component from pol-ui to use the Tabs element:

import { Tabs } from "pol-ui";

Default Tabs

import { Tabs } from "pol-ui";
 
const tabs = [
  {
    name: "Product",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Product Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Features",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Features Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem
        </p>
      </div>
    ),
  },
  {
    name: "Reviews",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Reviews Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Customers",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Customers Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
        </p>
      </div>
    ),
  },
];
 
export const TabsExample = (): JSX.Element => (
  <div className=" relative flex flex-col mx-auto w-full  items-start justify-start">
    <Tabs tabs={tabs} />
  </div>
);

Props

Prop name	Type	Default	Description
tabs	Tab[]	-	The tabs to display
containerClassName	string	-	The class name of the
container
activeTabClassName	string	-	The class name of the
active tab
tabClassName	string	-	The class name of the tab
contentClassName	string	-	The class name of the
content
hasMotion	boolean	false	If the tabs have motion
hasNavMotion	boolean	true	If the tabs have nav
motion
mode	contained / underlined	TabMode.underlined	The mode of the tabs
theme	TabsTheme	-	The theme of the tabs

Prop name	Type	Default	Description
name	string	-	The name of the tab
content	React.ReactNode	-	The content of the tab
disabled	boolean	false	If the tab is disabled

Examples

Contained Tabs

import { Tabs } from "pol-ui";
 
const tabs = [
  {
    name: "Product",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Product Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Features",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Features Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem
        </p>
      </div>
    ),
  },
  {
    name: "Reviews",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Reviews Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Customers",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Customers Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
        </p>
      </div>
    ),
  },
];
 
export const TabsExample = (): JSX.Element => (
  <div className=" relative flex flex-col mx-auto w-full  items-start justify-start">
    <Tabs tabs={tabs} mode="contained" />
  </div>
);

Tabs with motion

With Motion

import { Tabs } from "pol-ui";
 
const tabs = [
  {
    name: "Product",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Product Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Features",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Features Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem
        </p>
      </div>
    ),
  },
  {
    name: "Reviews",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Reviews Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Customers",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Customers Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
        </p>
      </div>
    ),
  },
];
 
export const TabsExample = (): JSX.Element => (
  <div className=" relative flex flex-col mx-auto w-full  items-start justify-start">
    <Tabs tabs={tabs} hasMotion={true} />
  </div>
);

Tabs without nav motion

Without Nav Motion

import { Tabs } from "pol-ui";
 
const tabs = [
  {
    name: "Product",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Product Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Features",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Features Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem
        </p>
      </div>
    ),
  },
  {
    name: "Reviews",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Reviews Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Customers",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Customers Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
        </p>
      </div>
    ),
  },
];
 
export const TabsExample = (): JSX.Element => (
  <div className=" relative flex flex-col mx-auto w-full  items-start justify-start">
    <Tabs tabs={tabs} hasNavMotion={false} />
  </div>
);

Disabled tab

Without Nav Motion

import { Tabs } from "pol-ui";
 
const tabs = [
  {
    name: "Enabled",
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Enabled Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
  {
    name: "Disabled",
    disabled: true,
    content: (
      <div className="bg-secondary-200 p-6 rounded-2xl">
        <h2 className="text-3xl text-secondary-900 font-bold">Disabled Tab</h2>
        <p>
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur adipisicing elit. Ipsam, quas.
          Lorem ipsum dolor sit amet consecte tur
        </p>
      </div>
    ),
  },
];
 
export const TabsExample = (): JSX.Element => (
  <div className=" relative flex flex-col mx-auto w-full  items-start justify-start">
    <Tabs tabs={tabs} />
  </div>
);

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface TabsTheme {
  root: {
    base: string;
    shadow: string;
    wrapper: string;
  };
  head: {
    base: string;
    cell: {
      base: string;
    };
  };
  row: {
    base: string;
    hovered: string;
    striped: string;
  };
  body: {
    base: string;
    cell: {
      base: string;
    };;
  };
}