Tabs

Use :::tabs with child :::tab directives for package-manager examples, feature comparisons, and compact docs sections.

1:::tabs {default="pnpm" theme="glass"}2 3:::tab {label="pnpm" value="pnpm"}4```bash5pnpm add @valkyrianlabs/payload-markdown6```7:::8 9:::tab {label="npm" value="npm"}10```bash11npm install @valkyrianlabs/payload-markdown12```13:::14 15:::

:::tabs

Attributes:

• default: selected tab value on first render
• theme: tabs container theme
• tabTheme: default child tab panel theme

When default is missing or does not match a child tab value, the first tab is selected.

:::tab

Attributes:

• label: visible tab label
• value: stable tab identity
• theme: tab panel theme
• disabled: optional disabled trigger state

If value is missing, the renderer derives one from label. If both are missing, it generates a safe fallback.

Nested Markdown

Tab panels support normal Markdown, code fences, and nested directives:

1:::tabs {default="install"}2 3:::tab {label="Install" value="install"}4```bash5pnpm add @valkyrianlabs/payload-markdown6```7:::8 9:::tab {label="Notes" value="notes"}10:::callout {variant="tip" title="Portable content"}11Tabs still store as plain Markdown directives.12:::13:::14 15:::

Interactivity and Accessibility

Tabs render accessible server HTML with role="tablist", role="tab", and role="tabpanel".

The renderer progressively enhances tabs on the client:

• clicking a trigger switches panels
• arrow keys move between triggers
• Home and End jump to the first and last triggers
• Enter and Space activate a focused trigger

There is no URL hash or cross-page tab sync yet.

Themes

Built-in tabs container themes:

• default
• muted
• glass
• underline
• pills

Built-in tab panel themes:

• default
• muted
• glass