MDX component reference

Beta Feature

The Enterprise Portal is Beta. Features described on this page are subject to change.

This topic lists the MDX components that you can use in Enterprise Portal content pages, with their props and examples. MDX is markdown with embedded React components. The components render interactive UI elements that adapt to each customer's license, entitlements, and instance state.

For how to structure your content repo, use template variables, and control visibility, see Customize portal content.

Layout and callouts

<Note>

Informational callout box.

<Note title="Before You Begin">
Run `kubectl get sc` to confirm a default StorageClass is available.
</Note>

<Tip>

Highlighted tip or best practice.

<Tip title="New to this portal?">
Start with the Installation Guide for your deployment method.
</Tip>

<Warning>

Warning callout for important caveats.

<Warning title="Back Up Before Updating">
Always create a backup before applying updates.
</Warning>

<Tabs> / <Tab>

Tabbed content sections.

<Tabs groupId="install-method">
<Tab title="Linux">
- [Linux Installation](/installation/linux)
</Tab>
<Tab title="Helm">
- [Helm Installation](/installation/helm)
</Tab>
</Tabs>

Component	Prop	Description
<Tabs>	groupId	Optional. Keeps the selected tab in sync across <Tabs> and <OptionSelector> components that use the same key. See Keep a choice across pages. Omit it when the tabs are local to the page.
<Tabs>	defaultActiveTab	Optional. Zero-based index of the tab selected first. The value must be a number. A title such as defaultActiveTab="Helm" falls back to the first tab.
<Tab>	title	Required. The tab label.

Nested <Tabs> stay independent unless they share a groupId.

Keep a choice across pages

When a customer selects a tab in a <Tabs> with a groupId, the portal does the following:

• Selects the tab with the same title in every other <Tabs> with that groupId on the page, and in every <OptionSelector> with a matching storageKey
• Opens the same choice after a reload and on other pages in the same browser tab

The choice is stored in the browser tab's session storage. A portal link opened in a new browser tab starts without it, and closing the browser tab clears it. Logging out, switching teams, and accepting a team invite also clear it.

The default home page uses groupId="install-method" for its Linux and Helm quick links. The default support bundle page omits groupId, because its tabs are gated by entitlement and are not the same choice as the home page's install method.

<Accordion>

Collapsible content section.

<Accordion title="Advanced Configuration" defaultOpen={false}>
Detailed configuration options...
</Accordion>

Props: title (required), defaultOpen (optional, defaults to false).

<OptionSelector> / <Option>

Option picker with its own look. <OptionSelector> remains supported, and existing pages keep working. For new pages, use <Tabs> with groupId.

<OptionSelector label="Install Method" defaultOption="Linux" storageKey="install-method">
<Option value="Linux">
- [Linux Installation](/installation/linux)
- [Linux Support Bundles](/operations/bundles/linux)
</Option>
<Option value="Helm">
- [Helm Installation](/installation/helm)
- [Helm Support Bundles](/operations/bundles/helm)
</Option>
</OptionSelector>

Prop	Description
label	Display label.
defaultOption	Value selected first.
storageKey	Key for keeping the selection, shared with <Tabs> groupId. Selecting a value selects it in every other <OptionSelector> with the same storageKey and every <Tabs> with the same groupId, including on the same page. When storageKey is missing, the label is the key. For example, label="Install Method" becomes install-method, the same key as <Tabs groupId="install-method">. Omit both storageKey and label to keep the selection in memory only.

The selection follows the same storage rules as <Tabs>. For more information, see Keep a choice across pages.

Display

<CodeBlock>

Syntax-highlighted code block.

<CodeBlock language="yaml" title="values.yaml">
replicaCount: 3
image:
  repository: myapp
</CodeBlock>

Props: language, title.

<CommandBlock>

Styled terminal command with copy button.

<CommandBlock>
kubectl get pods -A
</CommandBlock>

Props: command, label, encoded.

<ContentLink>

Internal navigation links. Standard markdown links ([text](path)) are automatically converted to use client-side navigation, so you don't need to use this component directly.

Link paths resolve relative to the current page's URL, and the portal injects the customer's selected version into the resolved route. Because resolution is relative, a bare section/page path resolves correctly only from a top-level page. From a page inside a subdirectory, the same path resolves against that subdirectory. For example, [Configure values](installation/values) authored on the installation/helm page resolves to installation/installation/values, which does not exist.

To link reliably from any page, use a leading-slash absolute path. Absolute paths resolve from the content root, and the portal still injects the selected version:

See [Configure values](/installation/values).

From any page, this path resolves to /<version>/installation/values.

Installation components

These components render dynamic, customer-specific installation instructions based on the customer's license entitlements, selected install method, and instance state.

<PendingInstallSelector>

Shows a list of in-progress installations scoped to a specific install method. Customers select an installation to populate the following commands with that installation's credentials.

<PendingInstallSelector method="linux" />

Props: method ("linux", "helm", "kots", or "kurl", required), network ("online" or "airgap", optional filter), title (optional, defaults to "Installations in progress"), emptyText (optional), initialVisible (optional, number of items to show before "Show all").

<NewInstall>

Button to start a new installation. Creates a service account and generates credentials, which populate the install commands on the page.

<NewInstall method="helm" />

Props: method ("linux", "helm", "kots", or "kurl", required), network ("online" or "airgap", optional), label (optional, defaults to "New installation").

If you omit network, the default depends on the page's network selection: "airgap" for air gap, or "online" otherwise.

note

The portal fills the install commands for the selected installation. If you switch installations or rename your instance, the commands update automatically.

<NetworkAvailability>

Selector for online, proxy, or air gap installation mode. The portal shows the air gap option only when the customer's license supports air gap. Proxy selection also shows a Proxy URL field.

<NetworkAvailability installType="linux" />

Props: installType (optional, "linux", "helm", "kots", or "kurl"). Pass it so the air gap radio follows the correct entitlement. Without it, the portal hides the air gap option.

<VersionSelector>

Dropdown for selecting which release version to install.

<VersionSelector installType="helm" />

Props: installType ("linux", "helm", "kots", or "kurl").

<KubernetesDistribution />

Selector for the target Kubernetes distribution (EKS, GKE, AKS, etc.). No props.

<RegistryAccess />

Selects registry access settings and accepts a private registry hostname. Props: installType ("linux", "helm", "kots", or "kurl", optional, defaults to "helm"). For Helm, KOTS, and kURL, the component appears only when the page's network selection is air gap.

<LinuxInstallAssets />

Renders the full Linux/Embedded Cluster installation command sequence. Adapts to the customer's selected version and network availability. For air gap installations, includes an optional toggle for private registry image relocation. When enabled, the customer enters their registry hostname and the commands update to include image pull, tag, and push steps targeting that registry. Props: stepNumber (optional, starting step number).

<HelmInstallAssets />

Renders the full Helm installation command sequence. Props: stepNumber (optional), charts (optional, comma-separated list of chart names to include), exclude (optional, comma-separated list of chart names to hide).

When a customer selects limited or no registry access, <HelmInstallAssets /> automatically includes browser download links for the Helm chart tarballs needed for their install. A download link for the preflight plugin binary is always included, regardless of registry access settings. You do not configure anything else.

<LinuxAirgapInstallAssets />

Linux air gap installation commands. Shows an unavailable notice if the air gap bundle is not yet built. Props: stepNumber.

<HelmAirgapInstallAssets />

Helm air gap installation commands. Props: stepNumber, registryAvailability, charts (optional), exclude (optional).

When a customer selects limited or no registry access, <HelmAirgapInstallAssets /> automatically includes browser download links for Helm chart tarballs. These links are also shown in the update flow for customers in the same registry mode.

<KotsInstallAssets />

Renders the full online or proxy KOTS existing-cluster installation command sequence. Generated commands can include:

• --license-file ./license.yaml
• --app-version-label
• --namespace with the application slug when the slug is 63 characters or fewer
• On non-stable channels, the install positional appSlug/channelSlug
• When the customer selects proxy, --http-proxy / --https-proxy / --no-proxy on the install line, and curl -x <proxy> on the CLI download

The portal leaves out --shared-password, so KOTS prompts for the Admin Console password instead of printing a secret on the page.

Props: stepNumber (optional, starting step number).

<KurlInstallAssets />

Renders the full online or proxy kURL installation command sequence. When the customer selects proxy, the generated command uses curl -x <proxy> for the installer download and prefixes HTTP_PROXY/HTTPS_PROXY onto the sudo bash. Props: stepNumber (optional, starting step number).

<KotsAirgapInstallAssets />

Renders KOTS air gap download steps for the selected release. This component does not generate push-images or kots install --kotsadm-registry commands with customer registry credentials. The default KOTS page documents that air gap procedure in markdown instead. Props: stepNumber.

<KurlAirgapInstallAssets />

Renders kURL air gap installation steps. The first step includes artifact download links. The following step extracts the installer and runs install.sh airgap. Props: stepNumber.

<KotsInstallStep>

Renders one online KOTS install step by name. Props: step (required), stepNumber (optional). Use step="install_kots".

<KurlInstallStep>

Renders one online kURL install step by name. Props: step (required), stepNumber (optional). Use step="install_kurl".

<KotsAirgapInstallStep>

Renders one KOTS air gap download step by name. Props: step (required), stepNumber (optional). Use step="download_assets". step="download" is an alias for download_assets.

<KurlAirgapInstallStep>

Renders one kURL air gap install step by name. Props: step (required), stepNumber (optional). Use step="download_assets" or step="install_kurl".

For <KotsInstallStep>, <KurlInstallStep>, and <KurlAirgapInstallStep>, step="install" selects install_kots or install_kurl. <KotsAirgapInstallStep> only has download_assets, so step="install" has no target there.

<KotsDownloadAssets />

Renders a KOTS downloads section with a version picker for the selected release. The customer's license must include the KOTS install type. The KOTS CLI and the optional Preflight and Support Bundle CLI tools still appear when air gap is off. The Admin Console bundle and the application air gap bundle appear only when air gap is on, and only when you omit cliOnly. This component does not render install commands. Do not move the air gap mount out of <WhenNetwork mode="airgap"> to put CLI tools on the online branch. A customer who has air gap on the license but selected online would then see those bundles as required. Use a second mount with cliOnly={true} on the online/proxy branch instead. The default KOTS page does this. Props: stepNumber, cliOnly (optional).

<KurlDownloadAssets />

Renders a kURL downloads section with a version picker for the selected release. The customer's license must include the kURL install type. The optional KOTS, Preflight, and Support Bundle CLI tools still appear when air gap is off. The kURL installer bundle (air gap tarball) and the application air gap bundle appear only when air gap is on, and only when you omit cliOnly. This component does not render install commands. Props: stepNumber, cliOnly (optional).

<WhenNetwork>

Shows or hides child content based on the customer's Network Availability selection. Use this to keep online generated commands and air gap documentation on the same page. Accepted mode tokens are online, proxy, and airgap (comma-separated). With no <NetworkAvailability/> on the page the selection stays "online", so mode="airgap" content never appears. The portal skips unrecognized tokens such as "Airgap" or "air-gap". In content preview it shows an authoring warning that lists the accepted modes. Props: mode (required), children.

<InstanceName />

Prompts the customer to name their instance after installation. Renaming updates the service account name and refreshes the install commands on the page.

<InstanceName />

Props: title (optional, defaults to "Name Your Instance"), method (optional, "linux", "helm", "kots", or "kurl").

<AdminConsoleUrl />

Displays the Admin Console URL for Embedded Cluster installations. No props.

<HelmReleaseImages />

Lists all container images included in a Helm release for the selected version. Includes a copy button for the full image list. Props: title (optional, defaults to "Helm images"), emptyText (optional, message when the release has no images).

Filtering charts in install instructions

For applications with multiple Helm charts, you can control which charts appear in generated install and update instructions using the charts and exclude props. This lets you create separate install pages or sections for different charts, or hide optional addon charts from the default instructions.

\{/* Only show instructions for specific charts */\}
<HelmInstallAssets charts="core-app, worker" />

\{/* Show all charts except optional addons */\}
<HelmInstallAssets exclude="optional-addon" />

\{/* Chart filtering also works on air gap and update components */\}
<HelmAirgapInstallAssets charts="core-app" />
<HelmUpdateAssets exclude="optional-addon" />

The charts and exclude props accept comma-separated chart names. Use charts to include only the listed charts, or exclude to show all charts except the listed ones.

<InstallStep>

Wraps content in a numbered step container.

<InstallStep stepNumber={1} title="Download the installer">
Run the following command to download...
</InstallStep>

Props: stepNumber, title, optional (boolean).

<Prerequisites>

Styled prerequisites section.

<Prerequisites title="Before You Begin">
- Kubernetes 1.26+
- Helm 3.x
</Prerequisites>

Update components

<LinuxUpdateAssets />

Renders Linux/Embedded Cluster upgrade instructions for the customer's current instance. For air gap upgrades, includes a registry hostname input for image relocation when the customer uses a private registry. Props: stepNumber.

<HelmUpdateAssets />

Renders Helm upgrade instructions. Props: stepNumber, charts (optional), exclude (optional).

<KotsUpdateAssets />

Renders ordered Admin Console application-upgrade guidance. In air gap mode, it loads the selected release through the read-only release-assets path. It renders only the application air gap bundle, and it does not record an update attempt. Props: stepNumber, targetVersionLabel, networkMode (online or airgap), guideHref, isCurrentVersion, and namespace (optional kotsadm namespace for the reopen command).

<KurlUpdateAssets />

Renders the same guided application-upgrade flow for a kURL instance. With no namespace prop, the reopen command uses --namespace default. It does not present the kURL installer bundle or install.sh as an application-update action. Props: stepNumber, targetVersionLabel, networkMode (online or airgap), guideHref, isCurrentVersion, and namespace (optional).

<AdminConsoleCommand />

Renders the kubectl kots admin-console --namespace sample used on the default KOTS and kURL upgrade guides. Props: installType (required, kots or kurl. Any other value renders nothing), namespace (optional namespace where the Admin Console is running. Empty or invalid keeps the type default), and lead (optional text before the command. The component appends the command and a period).

<UpgradePath>

Conditionally shows content based on the customer's current version. Lets you show different upgrade instructions depending on which version the customer is upgrading from.

Props:

Prop	Description
fromBelow	Show content only when the customer's current version is lower than this version
fromAbove	Show content only when the customer's current version is higher than this version
fromBelowOrEqual	Show content only when the current version is this version or lower
fromAtLeast	Show content only when the current version is at least this version

All version values must be strict major.minor.patch format (e.g. 2.0.0). The portal removes a v prefix on its own. Pre-release suffixes (e.g. 2.0.0-rc.1) are not supported.

Combine props to define a version range. Every prop has to match. If the customer has no selected instance, or the portal cannot parse the version, it hides the content.

Example:

<UpgradePath fromBelow="2.0.0">
## Upgrading from 1.x

Before upgrading to 2.x, you must migrate your database schema. Run:

```shell
./migrate-schema.sh
```
</UpgradePath>

<UpgradePath fromAtLeast="2.0.0">
## Upgrading from 2.x

No manual migration needed. The upgrade is automatic.
</UpgradePath>

In this example, a customer on version 1.5.0 sees the "Upgrading from 1.x" instructions. A customer on 2.1.0 sees the "Upgrading from 2.x" block.

<ReleaseNotes />

Displays release notes for the target update version. No props.

Portal components

<ReleaseHistory />

Renders a release history timeline customers can browse, with version details and release notes. For air gap releases, each entry shows a build status badge (Ready, Building, Failed, or Not built). Props: limit (optional, max number of releases to show).

<SupportBundleUpload />

Upload interface for support bundles. No props.

<SupportBundleUploadHistory />

Lists previously uploaded support bundles. Props: limit.

<LinuxBundles />

Linux-specific support bundle generation instructions. No props.

<HelmBundles />

Helm-specific support bundle generation instructions. A download link for the support-bundle plugin binary is always included, regardless of registry access settings. No props.

<KurlBundles />

kURL-specific support bundle generation instructions. No props.

<KotsBundles />

KOTS-specific support bundle generation instructions for an existing cluster. No props.

Each of the four support bundle components renders the steps for one installation method and nothing else: no heading and no tab strip of its own. The page is what decides which methods a customer sees. The default template's Support Bundles page wraps all four in a single <Tabs> block, with each tab guarded by the entitlement for that installation method. That block does not set groupId.

<ContactInfo />

Displays the support contact information configured in theme.yaml. No props.

<LicenseDownload />

Renders a button that lets customers download their license file. The button appears only for customers whose license enables Embedded Cluster, KOTS, or kURL installations, which are the installation methods that use a license file. Helm customers do not see it. No props.

<InstancesAndUpdates />

Renders the full instances and updates management page inline. Helm and Embedded Cluster instances expand into inline CLI commands. KOTS and kURL instances expand into guided Admin Console application-upgrade panels. Air gap Helm and Embedded Cluster instances with an available update get a Mark update complete button after their upgrade instructions have loaded. Air gap KOTS and kURL instances get the same button when the application bundle is downloadable. You cannot remove the button. Optional props: kotsGuideHref, kurlGuideHref, kotsNamespace, and kurlNamespace. kotsNamespace is the namespace where the Admin Console is running for KOTS card reopen commands. kurlNamespace is the same for kURL cards. Setting one does not change the other. A KOTS card links only to kotsGuideHref and a kURL card only to kurlGuideHref.

Security components

These components require Security Center for the customer. They are available for Helm and Embedded Cluster installs only. See Security Center for more information.

<CVEReport />

Displays CVEs by severity, component, and container image for the selected release. For each CVE, the Fixed In column identifies the earliest vendor release that resolves it, when one is available. The report also compares CVE counts with the latest release. Depending on your Security Center settings, the report shows only fixable CVEs or includes a toggle for customers to show all CVEs. When you turn on Enable raw CVE scan to be downloadable, the report also displays Download full CVE report. That downloads the raw Grype scan JSON for the selected release. This download is distinct from the Software Package Data Exchange (SPDX) SBOM available through <SBOMReport />. No props.

<SBOMReport />

Displays SBOM metadata and a download option for the selected release. If no SBOM is available, the component displays an unavailable state. No props.

<SecurityVersionSelector />

Selects the install type and release used by the security reports. For older releases, the component shows active instances and links to their upgrade options. When customers select the latest release, the component identifies active instances on older releases. No props.

Automation components

<APIReference />

Renders the customer service account API reference from Replicated's generated Swagger spec, including a Download Swagger JSON button. Props: description (optional, replaces the default intro text).

<HeadlessWorkflowGuide />

Renders an example workflow for using the customer service account API from automation. No props.

For how to add these components to your portal, see Headless Enterprise Portal: customer API.