Component primitive

Brand Tabs

<brand-tab-group> wraps Web Awesome's <wa-tab-group>. Use <wa-tab> (with slot="nav") and <wa-tab-panel> children directly, wa-tab-group enumerates them by tag name.

<brand-tab-group>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-tab-group>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Basic (top)

General

Billing

Security

General settings for your account.

Billing information and invoices.

Password, MFA, and session controls.

Start placement

Overview

Stats

Export

Overview panel.

Stats panel.

Export panel.

Closable tabs

Tab one

Tab two

Tab three

Panel one.

Panel two.

Panel three.

Usage

import { BrandTabGroup } from '@brandos/ui';

<brand-tab-group placement="top">
  <wa-tab slot="nav" panel="general">General</wa-tab>
  <wa-tab slot="nav" panel="billing">Billing</wa-tab>
  <wa-tab-panel name="general">General settings.</wa-tab-panel>
  <wa-tab-panel name="billing">Billing settings.</wa-tab-panel>
</brand-tab-group>