CodeGroup

CodeGroup wraps a set of CodeTab children in a tabbed panel. Pick a tab, see that content. The killer feature: SyncKey : any two CodeGroups on the same page (or across pages, in a session) sharing a key stay locked to the same tab.

Basic use

dotnet add package ShellDocs.Components --prerelease

<CodeGroup>
<CodeTab Label="dotnet CLI">dotnet add package ShellDocs.Components --prerelease</CodeTab>
<CodeTab Label="PackageReference">&lt;PackageReference Include="ShellDocs.Components" Version="0.1.1-alpha" /&gt;</CodeTab>
</CodeGroup>

Syncing tabs across the page

Set SyncKey on every CodeGroup that should stay in lockstep. The user's active tab is remembered globally per key.

dotnet add package ShellDocs.Core --prerelease

<CodeGroup SyncKey="pkg">
<CodeTab Label="dotnet CLI">dotnet add package ShellDocs.Core --prerelease</CodeTab>
<CodeTab Label="PackageReference">&lt;PackageReference Include="ShellDocs.Core" Version="0.1.1-alpha" /&gt;</CodeTab>
</CodeGroup>

dotnet add package ShellDocs.Markdown --prerelease

<CodeGroup SyncKey="pkg">
<CodeTab Label="dotnet CLI">dotnet add package ShellDocs.Markdown --prerelease</CodeTab>
<CodeTab Label="PackageReference">&lt;PackageReference Include="ShellDocs.Markdown" Version="0.1.1-alpha" /&gt;</CodeTab>
</CodeGroup>

Try it

Switch tabs on either group above : the other snaps to match. SyncKey="pkg" is the convention used across this site for install snippets.

Rich tab content

Tab bodies can contain full markdown : multi-line code blocks, prose, other components. Common patterns are still just code, but nothing forbids richer content.

<CodeGroup>
<CodeTab Label="With CLI">

shelldocs init MyDocs cd docs/MyDocs.Docs shelldocs dev ``` ``` dotnet new blazor -o MyDocs.Docs cd MyDocs.Docs dotnet add package ShellDocs.Components --prerelease ```

Then patch Program.cs : see attach mode for the setup guide.


## Props

### CodeGroup

<div data-shelldocs-slot="component" data-shelldocs-id="s78ec75e0f843"></div>

### CodeTab

<div data-shelldocs-slot="component" data-shelldocs-id="sf048965f69fe"></div>

## How syncing works

`CodeGroupSyncState` is a scoped service tracking `key → active label`. When a tab is picked, the state fires a change event. Every `CodeGroup` on the page listens; when its `SyncKey` matches the changed key, it re-selects its tab (assuming it has a matching label). No JS involved : pure Blazor cascading state.

Consequence: tabs sync by their `Label` string. Two `CodeGroup`s sharing `SyncKey="pkg"` will only visibly co-move on labels they have in common. Non-matching labels are unaffected.

## See also

<div data-shelldocs-slot="component" data-shelldocs-id="sbd801f791649"></div>