NgMd
On this page ▾

Components

The authoring components NgMd ships in src/app/ui/. Compose them in any .page.ts via the NgmdUi barrel, or drop them inline in any .md file via the Custom Elements bridge. See the showcase for the markdown-side view.

Every block component below accepts a Tailwind class on the markdown tag for per-instance spacing. <ngmd-callout class="mt-10">, <ngmd-card-grid class="my-0">, etc. See per-instance spacing for the full pattern.

Callout

Bordered box with a coloured side stripe. Five types: info, tip, success, warning, danger.

Note

Info callout. Context, links, or additional reading.

Tip

A soft recommendation. Pair with a code snippet.

Done

Confirmation that a step worked.

Warning

Non-blocking caution.

Critical

Breaking-change or data-loss warning. Use sparingly.

Alert

Single-line banner with a side stripe. Lighter than a callout. Severities: info, warning, critical, helpful, important.

INFO: Plain informational alert.
HELPFUL: Sidebar context for the reader.
WARNING: Watch out, but the page still works.
CRITICAL: Something will break if you ignore this.
IMPORTANT: Worth pausing for.

Card

Bordered card with title and body. Pass link to make the whole card a router link with a hover state. Add avatar next to image to render the image as a round 56px photo, for people cards.

Plain card

Body content. No link, no hover. Use for grouping prose.

Linked card

Wraps the whole card in a router link. Hover darkens the border.
Read more

Erkam Yaman

Maintainer. avatar turns the image into a round photo.

Tabs

Tab UI with keyboard navigation. Bodies can be any markup, not just code. 

pnpm create ngmd@latest my-docs

Pill row

Horizontal pill-shaped links. External URLs auto-target a new tab.

ThemingMarkdown routesChangelog

Workflow

Numbered step list with a connecting line down the side. Each step gets its own title and body.

1

Scaffold

Run pnpm create ngmd@latest my-docs.
2

Install

Run pnpm install in the new directory.
3

Develop

Run pnpm dev and open http://localhost:5173.

Hero

Page header with optional gradient background. Pass gradient for the brand-accent wash (driven by the --accent-gradient token), omit for the quiet variant. Pass logo to show a brand image left of the title.

Welcome

The hero you see on the home page.

Angular

A page about a tool, with its logo.

Code block

Standalone code block with header bar showing the filename. Lazy-loads Shiki at runtime for syntax highlighting. Pass either a raw [code] string or fenced markdown.

Video

YouTube or Vimeo embed. Pass the canonical watch URL; the component normalises it to the player iframe and lazy-loads.

Image

Figure with optional caption. Lazy-loads, applies the standard rounded border so it sits in prose without extra Tailwind.

Two tabby kittens, Angular and Excel, looking up, one sitting in a flower pot
Angular and Excel.

Accordion

Disclosure list, backed by the native <details> element for keyboard, ARIA, and SSR-friendly default-open for free. Pass open on an item to start it expanded.

Initial public release was May 2026. The starter is at v0 while we collect feedback from first projects.

Card grid

Container around <ngmd-card> for n-up layouts. Two columns by default, pass columns="3" for three. Stacks to single column on mobile.

Markdown routes

How file-based routing wires content to URLs.
Read

Theming

CSS variable tokens and the fuchsia accent wiring.
Read

Toast

Non-blocking inline feedback for clipboard failures, save confirmations, link copies — any short message that shouldn't take over the page. Inject ToastService anywhere and call .success(), .error(), or .info(). The stack renders top-right from the app-level <app-toaster>; nothing to mount per-page.

Default duration is 3 seconds. Pass 0 as the second arg to keep a toast visible until the user clicks the close icon.

Badge

Inline status pill. Six variants, each tied to a lifecycle meaning and a fixed colour so the signal reads the same way across every page.

NewUpdatedAlphaBetaStableDeprecated