Tabs

Storybook

Tabs components organize content into multiple sections that users can navigate between. They provide an efficient way to present related information in a compact interface.

React

To implement Tabs component into your project you'll need to add the import:

import { Tabs } from "@shoptet/ui";

After adding import into your project you can use it simply like:

<Tabs
  tabs={[
    { id: "/tab-1-url", title: "Tab 1" },
    { id: "/tab-2-url", title: "Tab 2", content: <div>Content 2</div> },
    { id: "/tab-3-url", title: "Tab 3" },
  ]}
  activeTabId="/tab-2-url"
  onTabChange={(tabId) => {
    window.location.assign(tabId);
  }}
/>