Authoring Guide

Overview & MDC Basics

How pages are written in this docs platform — Markdown, MDC components, frontmatter, slots, props and live previews.

Every page on this site is a Markdown file under content/<locale>/<tier>/…. On top of plain Markdown you get MDC (MarkDown Components) — a syntax for dropping Vue components straight into prose. This guide is a working cheatsheet: every feature below is rendered live from the same source you can copy.

This whole section lives in the internal tier, so it only ships on the internal build. It's a contributor reference, not customer-facing documentation.

The three things you can write

Markdown — headings, lists, tables, links, code fences. Rendered through styled prose components (see ).
Block components — ::name … :: blocks that expand to rich UI (cards, tabs, callouts, steps…).
Inline components — :name[label]{props} woven into a sentence.

Block component syntax

A block component opens and closes with ::. Everything between is its default slot.

This callout was written as a block component.

::callout{icon="i-lucide-rocket"}
This callout was written as a block component.
::

Passing props

Props go in {} after the name. Three flavours:

Style	Example	Use for
Inline	`::callout{color="info"}`	short scalar props
YAML	a `---` block as the first lines inside	many props, or multi-line values
JSON	`{:items='["a","b"]'}` (note the leading `:`)	arrays / objects

::card
---
title: Provisioning
icon: i-lucide-cpu
to: /en/internal/admin/dashboard
---
Body content (the default slot) goes here.
::

: before an attribute means "bind this as JavaScript", so :items='[…]' passes a real array, not a string.

Inline components & attributes

Use a single colon inside a line. You can also style any span of text with {} attributes — classes (.class), ids (#id) and attributes all work.

Press Cmd K to search, or read the docs.

Press :kbd{value="Cmd"} :kbd{value="K"} to search, or read the [docs]{.text-primary .font-bold}.

Slots

Components can expose named slots beyond the default one. Inside an MDC block, a line starting with #slotname switches to that slot.

::card
#title
A custom title slot
#default
The body, in the default slot.
::

Frontmatter

The block between the leading --- fences sets page metadata. The common fields:

title

string

Page title — used in the browser tab, <h1>, breadcrumbs and search.

description

string

Shown under the title and used for SEO / social cards.

navigation

boolean | object

Set false to hide from the sidebar, or an object to override its icon / title.

navigation.icon

string

Iconify name (e.g. i-lucide-rocket) shown next to the page in the sidebar.

Data binding

Reference frontmatter (or injected data) inline with {{ }}, with an optional fallback:

---
product: KLSTR.one
---

The {{ $doc.product || 'device' }} supports Art-Net and sACN.

Live-preview pattern (used throughout this guide)

Every demo here uses ::code-preview: the default slot renders live, the #code slot shows the copyable source.

:::code-preview
:badge[Live result]

#code
```mdc
:badge[Live result]
```
:::

Anything in the Nuxt UI library is available in Markdown via its U-prefixed global name — e.g. :u-badge[New]{color="success"} or :u-button{label="Go"} — even when there's no dedicated prose wrapper.

Read on for the full catalogue — start with Text & Prose.

Text & Prose

Headings, emphasis, lists, tables, links, inline code, keyboard keys and badges — the everyday Markdown, styled.