Artisaan Logo
Docs
UI Modules

UI Modules

Visual components available for writing documentation in .mdx

Available components

ComponentWhen to use
DocHeaderOpen the page with standardized title and description
CodeBlockDisplay a single command/snippet with copy button
CodeTabs + CodeTabItemShow code variations (OS, language, environment)
Steps + StepDescribe sequential flows with timeline visuals

DocHeader

<DocHeader
  title="Configuration"
  description="How to prepare the environment for MDX rendering"
/>

CodeBlock

<CodeBlock>
  artisaan docs build
</CodeBlock>

Use for short, objective snippets.

CodeTabs

Rendered example:

artisaan docs sync

Usage example:

<CodeTabs>
  <CodeTabItem label="MacOS/Linux">
    artisaan docs sync
  </CodeTabItem>

  <CodeTabItem label="Windows">
    artisaan.exe docs sync
  </CodeTabItem>
</CodeTabs>

Steps

<Steps>
  <Step title="Create file" variant="active" code="docs/ui/modules.mdx">
    Create the file for the desired route.
  </Step>

  <Step title="Add content" code="DocHeader + sections + examples">
    Structure content in clear blocks.
  </Step>
</Steps>

Recommended editorial pattern

  • Always start with DocHeader.
  • Use h2 for sections and h3 for details.
  • Keep one idea per section to improve sidebar navigation.
  • Prefer short examples that users can copy directly.