Tab Configuration

Each entity page renders one or more tabs: Info, API, Source, plus Theming Tokens and Example when a component opts into them. Tab visibility is data-driven. Sections only render when there’s something to show.

Auto-visibility

• Theming Tokens appears on component pages when the component declares any theming tokens or an @overview in its associated CSS / SCSS file.
• Example appears on component pages when at least one <example-url> marker is present in the class JSDoc.
• Info, API, Source are always present where applicable.

Section composition

Within each tab, sections render in a fixed order driven by constants such as DEFAULT_INFO_SECTIONS, DEFAULT_API_SECTIONS, and DEFAULT_THEMING_SECTIONS. Sections without data are skipped: a component without inputs simply omits the inputs row, no empty heading.

Theming tab sections

The Theming tab’s composition is configurable per project via the JSON config file (no CLI flag). Pass a subset of ['overview', 'index', 'tokens', 'source'] in the order you want them to appear:

{
  "themingTabSections": ["overview", "tokens"]
}

The example above hides the per-tab token index and the source preview. Tab visibility itself is not affected. The Theming tab still shows whenever theming data exists.

Deeper customization

For changes beyond reordering or hiding sections (custom rendering, additional members, project-specific layouts) use the JS-based template override system via --templates <path>. Each overridable surface (page-level and block-level) is a JS partial exporting function(data, helpers) .... Migrating a folder of legacy Handlebars overrides? Run compodocx migrate templates.