Tabs

Switch between different content panels within the same context area.

Account

Name

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Tabs Parts

import {
  Tabs,
  TabsList,
  TabsItem,
  TabsPanel
} from "components/selia/tabs";

Structure

The expected structure and composition of the component.

Anatomy

<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsItem value="tab-1">Tab 1</TabsItem>
    <TabsItem value="tab-2">Tab 2</TabsItem>
    <TabsItem value="tab-3">Tab 3</TabsItem>
  </TabsList>
  <TabsPanel value="tab-1">
    Content 1
  </TabsPanel>
  <TabsPanel value="tab-2">
    Content 2
  </TabsPanel>
  <TabsPanel value="tab-3">
    Content 3
  </TabsPanel>
</Tabs>