Components

A static, accessible component library for serious documentation.

M-Press ships the complete component library in the open-source binary. Every component renders at build time; JavaScript only adds progressive enhancement.

One component grammar

Every block component starts with @name{attributes} and ends with @end. Nested components use the same grammar at every level. Leaf components such as buttons and images may use their compact single-line forms.

The older three-colon fences remain accepted so existing sites and imported content still build. M-Press does not generate them. New documentation should use the @ grammar. M-Press only treats a registered block component name at the start of a line as a directive. Compact buttons and images must match their complete signatures, so email addresses and ordinary mentions are unchanged.

Notes and details

@note{type="tip" title="Plain Markdown inside"}
The body supports **Markdown**.
@end

Tabs

Tabs use buttons, tab panels, and ARIA state. The first panel remains readable when scripts are unavailable.

Cards and links

Steps

File trees, badges, and buttons

Use stable for a compact status, or Open the guide for a clear action inside prose.

Layout containers

Containers add small, allow-listed layout rules without turning the Markdown file into a template language.

Landing page layouts

Landing pages can use nested Markdown layout directives. Use section, columns, and column to define the page structure. Use actions for a group of buttons. Use headline when a large heading needs deliberate line breaks.

@section{variant=hero}
@columns{variant=hero}
@column{variant=hero-copy}
@headline
Modern docs.
Rich components.
Just Markdown.
@end

Write the supporting copy as ordinary Markdown.

@actions
@button[Start the tutorial](/tutorials/first-site/){primary}
@button[Read the guide](/authoring/){secondary}
@end
@end

@column
Add a product example, image, terminal, or another component here.
@end
@end
@end

The default theme supplies responsive styles for the named landing variants. All layout content is rendered at build time. The source does not require HTML, MDX, or a JavaScript framework.

Compatibility

Starlight-compatible Aside, Tabs, TabItem, CardGrid, Card, LinkCard, Steps, FileTree, Badge, and Image syntax is understood for migrations. New content should use the @ directives because they are portable and easy to read.