SGDS Tab Component Skill

<sgds-tab-group> coordinates <sgds-tab> and <sgds-tab-panel> elements. Each tab's panel attribute must match a tab panel's name attribute — this is how the tab and its content are linked.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Visual style?

• Underline tabs → variant="underlined" (default)
• Solid/pill tabs → variant="solid"

Orientation?

• Horizontal tabs → orientation="horizontal" (default)
• Vertical side tabs → orientation="vertical"