Tab Group Web Component

First Tab Content

This is the content for the first tab.

Tab panels can contain any HTML content.

Second Tab Content

This is the content for the second tab.

You can include images, lists, or other components here.

• Item 1
• Item 2
• Item 3

Third Tab Content

This is the content for the third tab.

Each tab panel is only shown when its corresponding tab is active.

Key Features

• Fully accessible with ARIA support
• Keyboard navigation
• Customizable with CSS variables
• Lightweight and dependency-free
• Easy to integrate into any project

Usage

Import the component and use it in your HTML:

<tab-group>
  <tab-list>
    <tab-button>Tab 1</tab-button>
    <tab-button>Tab 2</tab-button>
  </tab-list>
  <tab-panel>Panel 1 content</tab-panel>
  <tab-panel>Panel 2 content</tab-panel>
</tab-group>

Styling

Customize using CSS variables:

tab-group {
  --color-primary: #9f7aea;
  --border-radius: 1rem;
  --color-background: #f8f8f8;
}