Components API

Overview

Doom provides a collection of React components for building rich documentation pages. All components are exported from the doom package and can be used in MDX files or custom React components.

Import

import {
  Badge,
  Tabs,
  Tab,
  Steps,
  Toc,
  PackageManagerTabs,
  Markdown,
  Mermaid,
  JsonViewer,
  Callouts,
  Term,
  Overview,
  // ... and more
} from 'doom'

Layout Components

Tabs

Container for tabbed content with print-friendly rendering.

import { Tabs, Tab } from 'doom'

export type TabsProps = {
  defaultValue?: string
  groupId?: string
  children: React.ReactNode
}

defaultValue

string

Key of the initially selected tab

groupId

string

Sync tab selection across multiple tab groups with the same ID

children

React.ReactNode

required

Tab components to render

Example:

<Tabs>
  <Tab title="npm">
    ```bash
    npm install doom
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add doom
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add doom
    ```
  </Tab>
</Tabs>

Tab

Individual tab content (imported from Rspress).

export { Tab } from 'doom'

PackageManagerTabs

Pre-configured tabs for package manager commands (imported from Rspress).

export { PackageManagerTabs } from 'doom'

Example:

<PackageManagerTabs command="install doom" />

Steps

Numbered steps for tutorials and guides (imported from Rspress).

export { Steps } from 'doom'

Example:

<Steps>

### Install Doom

```bash
npm install doom
```

### Create Config

Create a `doom.config.ts` file.

### Start Dev Server

```bash
npm run dev
```

</Steps>

Content Components

Badge

Inline badge for labels and tags (imported from Rspress).

export { Badge } from 'doom'

Example:

# My Feature <Badge>New</Badge>

This feature is <Badge type="warning">Beta</Badge>

Callouts

Container for callout boxes and alerts.

export interface CalloutsProps {
  children: React.ReactNode
}

children

React.ReactNode

required

Content to display in the callout box

Example:

<Callouts>
  Important: Make sure to backup your data before upgrading.
</Callouts>

Markdown

Renders Markdown content with support for GFM and HTML.

export const Markdown = ({
  children,
  inline,
}: {
  children?: string
  inline?: boolean
}) => JSX.Element

children

string

Markdown content to render

inline

boolean

Render as inline content without wrapping paragraph tags

Example:

import { Markdown } from 'doom'

function MyComponent() {
  const content = '**Bold** text with [link](https://example.com)'
  return <Markdown>{content}</Markdown>
}

Mermaid

Renders Mermaid diagrams with dark mode support.

export interface MermaidProps {
  className?: string
  children: string
}

className

string

Additional CSS class names

children

string

required

Mermaid diagram syntax

Example:

<Mermaid>
  {`
  graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
  `}
</Mermaid>

JsonViewer

Displays JSON/YAML data with syntax highlighting and format switching.

export interface JsonViewerProps {
  value: JsonValue
}

value

JsonValue

required

JSON value to display (object, array, string, number, boolean, or null)

Example:

import { JsonViewer } from 'doom'

const data = {
  name: 'John Doe',
  age: 30,
  active: true,
  roles: ['admin', 'user']
}

function MyComponent() {
  return <JsonViewer value={data} />
}

Terminology

Term

Displays localized terminology with case transformation.

export interface TermProps {
  name: TermName
  textCase?: 'lower' | 'upper' | 'capitalize'
}

name

TermName

required

Name of the term defined in your terms configuration

textCase

'lower' | 'upper' | 'capitalize'

Text case transformation to apply

Example:

import { Term } from 'doom'

// Assuming you have defined 'product' term in your config
function MyComponent() {
  return (
    <div>
      Welcome to <Term name="product" />!
      <Term name="company" textCase="upper" /> provides the best solutions.
    </div>
  )
}

Terms Configuration: Define terms in your source code:

// terms.ts
export const terms = {
  company: {
    en: 'Acme Corp',
    zh: 'Acme 公司',
  },
  product: {
    en: 'Acme Platform',
    zh: 'Acme 平台',
  }
}

TermsTable

Displays a table of all defined terms with translations and descriptions.

export { TermsTable } from 'doom'

Page Components

Overview

Generates an overview page with automatic sidebar group detection.

export interface OverviewProps {
  content?: React.ReactNode
  groups?: Group[]
  defaultGroupTitle?: string
  overviewHeaders?: number[]
}

interface Group {
  name: string
  items: GroupItem[]
}

interface GroupItem {
  text: string
  description?: string
  link: string
  headers?: Header[]
}

content

React.ReactNode

Custom content to display before the overview groups

groups

Group[]

Custom groups to display (overrides automatic sidebar detection)

defaultGroupTitle

string

default:"Others"

Title for the default group when not specified

overviewHeaders

number[]

default:"[2]"

Heading levels to include in overview (e.g., [2, 3] for h2 and h3)

Example:

---
title: API Overview
overview: true
---

import { Overview } from 'doom'

<Overview
  content={
    <div>
      <p>Welcome to the API documentation.</p>
    </div>
  }
  overviewHeaders={[2, 3]}
/>

The Overview component automatically:

Detects sidebar groups and items
Displays page descriptions
Extracts and links to relevant headings
Creates a card-based layout

Kubernetes Components

K8sAPI

Renders Kubernetes API documentation from OpenAPI specs or CustomResourceDefinitions.

import { K8sAPI } from 'doom'

export interface K8sAPIProps {
  name: string
  namespaced?: boolean
  pathPrefix?: string
  filepath?: string
  apiGroup?: string
  apiVersion?: string
  apiKind?: string
}

name

string

required

Name of the API resource (schema name in OpenAPI or CRD metadata.name)

namespaced

boolean

Whether the resource is namespaced

pathPrefix

string

Custom path prefix for API endpoints

filepath

string

Specific OpenAPI or CRD file path to use

apiGroup

string

API group (overrides auto-detection from schema)

apiVersion

string

API version (overrides auto-detection from schema)

apiKind

string

API kind (overrides auto-detection from schema)

Example:

import { K8sAPI } from 'doom'

function MyAPIDoc() {
  return (
    <K8sAPI
      name="io.k8s.api.core.v1.Pod"
      namespaced={true}
      apiVersion="v1"
      apiKind="Pod"
    />
  )
}

The component automatically:

Displays the API schema with all properties
Generates API endpoint documentation
Shows whether the resource has a status subresource
Detects group/version/kind from Kubernetes extensions

K8sCrd

Renders CustomResourceDefinition documentation with expandable schema tree.

import { K8sCrd } from 'doom'

export interface K8sCrdProps {
  name: string
  crdPath?: string
}

name

string

required

The metadata.name of the CustomResourceDefinition

crdPath

string

Specific path to the CRD file (otherwise the first matched CRD will be used)

Example:

import { K8sCrd } from 'doom'

function MyCRDDoc() {
  return <K8sCrd name="myresources.example.com" />
}

The component displays:

CRD group badge
All versions with their schemas
Expandable property tree with types and descriptions
Required field indicators
Expand/collapse all controls

K8sPermissionTable

Displays a table showing RBAC permissions across different role templates.

import { K8sPermissionTable } from 'doom'

export interface K8sPermissionTableProps {
  functions: string[]
}

functions

string[]

required

Array of FunctionResource names to display permissions for

Example:

import { K8sPermissionTable } from 'doom'

function PermissionsDoc() {
  return (
    <K8sPermissionTable
      functions={['pod-management', 'deployment-management']}
    />
  )
}

The table shows:

Function display names (localized)
Actions: view, create, update, delete
Permission checkmarks (✓/✕) for each role template
Verbs are mapped to Kubernetes RBAC verbs (get, list, watch, create, update, patch, delete, deletecollection)

External Documentation Components

AcpApisOverview

Displays a note directing users to the ACP (Alauda Container Platform) APIs documentation site.

import { AcpApisOverview } from 'doom'

export const AcpApisOverview = () => JSX.Element

Example:

import { AcpApisOverview } from 'doom'

function AcpApiPage() {
  return (
    <>
      <h1>ACP APIs</h1>
      <AcpApisOverview />
    </>
  )
}

This component displays a localized note with a link to the ACP APIs overview guide on the external documentation site.

ExternalApisOverview

Generic component for displaying API overview notes for external documentation sites.

import { ExternalApisOverview } from 'doom'

export interface ExternalApisOverviewProps {
  name: string
}

name

string

required

Name of the external site as defined in sites.yaml

Example:

import { ExternalApisOverview } from 'doom'

function ExternalApiPage() {
  return <ExternalApisOverview name="my-product" />
}

Displays a note directing users to the APIs guide on the external documentation site. The site must be defined in your sites.yaml configuration.

ExternalSite

Displays a note about external documentation with a link to the separate documentation site.

import { ExternalSite } from 'doom'

export interface ExternalSiteProps {
  name: string
}

name

string

required

Name of the external site as defined in sites.yaml

Example:

import { ExternalSite } from 'doom'

function ProductPage() {
  return (
    <>
      <h1>Product Documentation</h1>
      <ExternalSite name="my-product" />
    </>
  )
}

Displays a localized note explaining that the documentation is available as a separate site due to different release cadences.

ExternalSiteLink

Link component for referencing pages in external documentation sites.

import { ExternalSiteLink } from 'doom'

export interface ExternalSiteLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  name: string
  children: ReactNode
}

name

string

required

Name of the external site as defined in sites.yaml

href

string

Relative path to the page on the external site

children

ReactNode

required

Link text content

Example:

import { ExternalSiteLink } from 'doom'

function MyPage() {
  return (
    <p>
      For more details, see the{' '}
      <ExternalSiteLink name="my-product" href="getting-started/">
        Getting Started Guide
      </ExternalSiteLink>
      .
    </p>
  )
}

The component automatically:

Resolves the full URL based on site configuration
Handles versioning and localization
Opens links in a new tab
Converts absolute URLs to print-friendly versions

Layout & UI Components

Masonry

Creates a masonry grid layout using the masonry-layout library.

import { Masonry } from 'doom'

export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
  options?: Options
}

options

Options

Masonry layout options (see masonry-layout documentation)

Example:

import { Masonry } from 'doom'

function Gallery() {
  return (
    <Masonry
      options={{
        itemSelector: '.grid-item',
        columnWidth: 200,
        gutter: 10
      }}
    >
      <div className="grid-item">Item 1</div>
      <div className="grid-item">Item 2</div>
      <div className="grid-item">Item 3</div>
    </Masonry>
  )
}

The component:

Lazy loads the masonry-layout library
Only renders on the client side (NoSSR)
Automatically initializes and destroys the masonry instance
Supports all masonry-layout options

Directive

Alternative syntax for callout boxes with support for collapsible details.

import { Directive } from 'doom'

export interface DirectiveProps {
  type?: 'danger' | 'details' | 'info' | 'note' | 'tip' | 'warning'
  children: ReactNode
  className?: string
  title?: ReactNode
  open?: boolean
  onToggle?: (open: boolean) => void
}

type

default:"info"

Type of directive (details type creates collapsible content)

title

ReactNode

Custom title (defaults to uppercase type name)

children

ReactNode

required

Content to display in the directive

className

string

Additional CSS class names

open

boolean

Initial open state for details type (controlled)

onToggle

(open: boolean) => void

Callback when details is toggled

Example:

import { Directive } from 'doom'

function MyPage() {
  return (
    <>
      <Directive type="warning" title="Important">
        Make sure to backup your data before upgrading.
      </Directive>

      <Directive type="details" title="Advanced Configuration">
        Additional configuration options are available for advanced users.
      </Directive>
    </>
  )
}

The details type creates a collapsible <details> element, while other types render as static callout boxes.

Configuration

Programmatic API

Components API

Overview

Import

Layout Components

Tabs

Tab

PackageManagerTabs

Steps

Toc

Content Components

Badge

Callouts

Markdown

Mermaid

JsonViewer

Terminology

Term

TermsTable

Page Components

Overview

Kubernetes Components

K8sAPI

K8sCrd

K8sPermissionTable

External Documentation Components

AcpApisOverview

ExternalApisOverview

ExternalSite

ExternalSiteLink

Layout & UI Components

Masonry

Directive

See Also

Build docs developers (and LLMs) love

Configuration

Programmatic API

​Overview

​Import

​Layout Components

​Tabs

​Tab

​PackageManagerTabs

​Steps

​Toc

​Content Components

​Badge

​Callouts

​Markdown

​Mermaid

​JsonViewer

​Terminology

​Term

​TermsTable

​Page Components

​Overview

​Kubernetes Components

​K8sAPI

​K8sCrd

​K8sPermissionTable

​External Documentation Components

​AcpApisOverview

​ExternalApisOverview

​ExternalSite

​ExternalSiteLink

​Layout & UI Components

​Masonry

​Directive

​See Also

Build docs developers (and LLMs) love

Overview

Import

Layout Components

Tabs

Tab

PackageManagerTabs

Steps

Toc

Content Components

Badge

Callouts

Markdown

Mermaid

JsonViewer

Terminology

Term

TermsTable

Page Components

Overview

Kubernetes Components

K8sAPI

K8sCrd

K8sPermissionTable

External Documentation Components

AcpApisOverview

ExternalApisOverview

ExternalSite

ExternalSiteLink

Layout & UI Components

Masonry

Directive

See Also