v1.0.0

Tabs

A set of layered sections of content — known as tab panels — that are displayed one at a time.

Interactive Requires: veritheme.js JS init: automatic

Default

Pill-style tabs with a muted background container.

html

Account

Make changes to your account here.

Password

Change your password here.

Settings

Manage your application preferences.

<div data-tab-group="default">
  <div role="tablist" class="vt-tabs-list vt-w-full">
    <button role="tab" aria-selected="true"
      class="vt-tabs-trigger vt-active vt-flex-1">
      Account
    </button>
    <button role="tab" aria-selected="false"
      class="vt-tabs-trigger vt-flex-1">
      Password
    </button>
  </div>
  <div role="tabpanel" class="vt-mt-4 vt-rounded-2xl vt-border vt-border-border-default vt-bg-surfaces-surface vt-p-6">...</div>
  <div role="tabpanel" class="vt-mt-4 vt-rounded-2xl vt-border vt-border-border-default vt-bg-surfaces-surface vt-p-6 vt-hidden">...</div>
</div>

Default With Icons

Pill-style tabs with icons alongside labels.

html

Manage your account details and preferences.

Update your password and security settings.

Control how and when you receive notifications.

<div data-tab-group="default-icons">
  <div role="tablist" class="vt-tabs-list vt-w-full">
    <button role="tab" aria-selected="true"
      class="vt-tabs-trigger vt-active vt-gap-1.5 vt-flex-1">
      <svg><!-- icon --></svg> Account
    </button>
    <button role="tab" aria-selected="false"
      class="vt-tabs-trigger vt-gap-1.5 vt-flex-1">
      <svg><!-- icon --></svg> Security
    </button>
  </div>
  <div role="tabpanel" class="vt-mt-4 vt-rounded-2xl vt-border vt-border-border-default vt-bg-surfaces-surface vt-p-6">...</div>
  <div role="tabpanel" class="vt-mt-4 vt-rounded-2xl vt-border vt-border-border-default vt-bg-surfaces-surface vt-p-6 vt-hidden">...</div>
</div>

Underline

Tab style with a bottom-border indicator instead of a pill background.

html

Overview content. This tab shows general information about your project.

Analytics content. Track your project's performance metrics here.

Reports content. Generate and view detailed reports.

<div data-tab-group="underline">
  <div role="tablist" class="vt-tabs-list-underline">
    <button role="tab" aria-selected="true"
      class="vt-tabs-trigger-underline vt-active">
      Overview
    </button>
    <button role="tab" aria-selected="false"
      class="vt-tabs-trigger-underline">
      Analytics
    </button>
  </div>
  <div role="tabpanel" class="vt-py-6">...</div>
  <div role="tabpanel" class="vt-py-6 vt-hidden">...</div>
</div>

Underline With Icons

Underline tabs with icons alongside labels.

html

Overview content. General information about your dashboard.

Analytics content. Track performance metrics here.

Reports content. Generate and view detailed reports.

<div data-tab-group="underline-icons">
  <div role="tablist" class="vt-tabs-list-underline">
    <button role="tab" aria-selected="true"
      class="vt-tabs-trigger-underline vt-active vt-inline-flex vt-items-center vt-gap-1.5">
      <svg><!-- icon --></svg> Overview
    </button>
    <button role="tab" aria-selected="false"
      class="vt-tabs-trigger-underline vt-inline-flex vt-items-center vt-gap-1.5">
      <svg><!-- icon --></svg> Analytics
    </button>
  </div>
  <div role="tabpanel" class="vt-py-6">...</div>
  <div role="tabpanel" class="vt-py-6 vt-hidden">...</div>
</div>

Anatomy

HTML structure of the Tabs component.

div[data-tab-group]                     ← Scoping wrapper
├── div[role="tablist"]                  ← Tab buttons container
│   ├── button[role="tab"]               ← Tab button (active)
│   └── button[role="tab"]               ← Tab button (inactive)
├── div[role="tabpanel"]                 ← Visible panel
└── div[role="tabpanel"].vt-hidden        ← Hidden panel

API Reference

All CSS classes available for the Tabs component.

Class Type Description
role="tablist" Base Container for tab buttons — pill or underline style
role="tab" Base Individual tab button
role="tabpanel" Base Content panel associated with a tab
vt-bg-surfaces-moderate vt-p-1 vt-rounded-lg Variant Default (pill) tablist container
vt-border-b vt-border-border-default Variant Underline tablist container
vt-bg-surfaces-surface vt-shadow-sm State Active tab in default style
vt-border-b-2 vt-border-info-primary State Active tab underline indicator
data-tab-group Modifier HTML attribute on wrapper — scopes tab switching
data-tab / data-panel Modifier HTML attributes linking tabs to their panels

Accessibility

Keyboard and screen reader support.

Feature Details
Roles tablist, tab, and tabpanel roles for proper semantics
Selection aria-selected="true" on the active tab
Association aria-controls and aria-labelledby link tabs to panels
Keyboard Arrow keys move between tabs, Home/End jump to first/last
Focus Only the active tab is in tab order (tabindex="0"), others are tabindex="-1"