Components

Use Nuxt UI prose components, Mermaid diagrams, and interactive embeds inside your Markdown pages.

Beyond plain Markdown, pages can use Vue components through the MDC syntax: a block component is written as ::component-name, closed with ::, and nested components add one colon per level (:::child).

Three kinds of components are available in docs pages:

Nuxt UI prose components — callouts, tabs, steps, and code widgets, available without any prefix.
Nuxt UI components — any Nuxt UI component, with the u- prefix (::u-button).
Layer components — Mermaid, CodeExplorer, and Browser, injected by the docs page.

Prose components

The layer enables Nuxt UI typography, so every prose component works out of the box. The ones you'll reach for most:

Callouts

::note
Bodies are parsed lazily on `get()`.
::

::warning
This feature is experimental.
::

Bodies are parsed lazily on get().

Variants: ::note, ::tip, ::warning, ::caution, and a generic ::callout{icon="i-lucide-info" to="/some/page"}.

Code groups

One fenced block per tab, labeled with [...]:

::code-group

```bash [pnpm]
pnpm add comark-docs@github:comarkdown/comark-docs
```

```bash [npm]
npm install comark-docs@github:comarkdown/comark-docs
```

::

pnpm add comark-docs@github:comarkdown/comark-docs

npm install comark-docs@github:comarkdown/comark-docs

Cards

::card-group
  :::card{icon="i-lucide-rocket" title="Fast" to="/concepts/architecture"}
  Parses on demand, caches by commit.
  :::

  :::card{icon="i-lucide-git-branch" title="Versioned"}
  Preview any branch or commit.
  :::
::

Fast

Parses on demand, caches by commit.

Versioned

Preview any branch or commit.

Steps

Wrap a sequence of ### headings to render a numbered procedure:

::steps{level="3"}

### Install the layer

### Extend your config

### Write a page

::

Other useful ones: ::tabs with :::tabs-item{label="..."} children, ::collapsible, ::accordion, ::code-preview (rendered output next to its source), and ::code-collapse. See the Nuxt UI typography docs for the full list and props.

Nuxt UI components

Any Nuxt UI component works with the u- prefix. The landing page uses this for its hero:

::u-button
---
to: /getting-started/introduction
trailing-icon: i-lucide-arrow-right
---
Get started
::

Get started

Mermaid diagrams

Write a ```mermaid code fence and it renders as a diagram, themed for both color modes:

```mermaid
flowchart LR
  A[Markdown push] --> B[GitHub webhook]
  B --> C[ISR purge]
```

CodeExplorer

::code-explorer embeds a browsable file tree from a GitHub repository, with syntax-highlighted file contents — useful for walking readers through an example project:

::code-explorer
---
org: comarkdown
repo: comark-docs
path: playground/content
default-value: playground/content/index.md
---
::

Select a file to view its contents

Prop	Type	Default	Purpose
`org`	`string`	required	GitHub organization or user.
`repo`	`string`	required	Repository name.
`path`	`string`	required	Directory to explore, relative to the repository root.
`branch`	`string`	`'main'`	Branch to read from.
`default-value`	`string`	first file	Path of the file selected on load.

The server only fetches from your own content repository by default. To embed another repository, add it to comarkDocs.codeExplorer.allowRepos.

Browser

::browser frames a live site in browser chrome — traffic lights, a URL bar, and an open-in-new-tab button around a lazy-loaded <iframe>:

::browser{src="https://comark.dev"}
::

https://comark.dev

Prop	Type	Default	Purpose
`src`	`string`	required	URL loaded in the iframe and shown in the address bar.

Next steps

Landing page — the hero, feature grids, FAQ, and CTA components for index.md.

Markdown

Comark supports all standard CommonMark and GitHub Flavored Markdown (GFM) features including headings, formatting, lists, tables, code blocks, and more.

Landing page

Build your home page in content/index.md with the hero, feature grid, FAQ, and CTA components.