NgMd 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
Tip
Done
Warning
Critical
<ngmd-callout type="tip" title="Tip">
Pair with a code snippet.
</ngmd-callout>Alert
Single-line banner with a side stripe. Lighter than a callout. Severities: info, warning, critical, helpful, important.
<ngmd-alert severity="warning">
Watch out, but the page still works.
</ngmd-alert>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
Linked card
Erkam Yaman
avatar turns the image into a round photo. <ngmd-card title="Linked card" link="/concepts/markdown-routes" cta="Read more">
Wraps the whole card in a router link.
</ngmd-card>
<ngmd-card avatar image="https://github.com/erkamyaman.png" title="Erkam Yaman">
Maintainer.
</ngmd-card>Tabs
Tab UI with keyboard navigation. Bodies can be any markup, not just code.
pnpm create ngmd@latest my-docsnpm create ngmd@latest my-docsyarn create ngmd my-docsbun create ngmd my-docs<ngmd-tabs>
<ngmd-tab title="pnpm" image="https://cdn.simpleicons.org/pnpm/F69220">
<pre><code>pnpm create ngmd@latest my-docs</code></pre>
</ngmd-tab>
<ngmd-tab title="npm" image="https://cdn.simpleicons.org/npm/CB3837">
<pre><code>npm create ngmd@latest my-docs</code></pre>
</ngmd-tab>
<!-- icon="..." also works (Lucide set) -->
</ngmd-tabs>Pill row
Horizontal pill-shaped links. External URLs auto-target a new tab.
<ngmd-pill-row>
<ngmd-pill href="/concepts/theming" title="Theming" />
<ngmd-pill href="/concepts/markdown-routes" title="Markdown routes" />
</ngmd-pill-row>Workflow
Numbered step list with a connecting line down the side. Each step gets its own title and body.
Scaffold
pnpm create ngmd@latest my-docs.Install
pnpm install in the new directory.Develop
pnpm dev and open http://localhost:5173.<ngmd-workflow>
<ngmd-step title="Scaffold">Run pnpm create ngmd@latest my-docs.</ngmd-step>
<ngmd-step title="Install">Run pnpm install.</ngmd-step>
<ngmd-step title="Develop">Run pnpm dev.</ngmd-step>
</ngmd-workflow>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
Angular
<ngmd-hero title="Welcome" gradient>
The hero you see on the home page.
</ngmd-hero>
<ngmd-hero title="Angular" logo="https://cdn.simpleicons.org/angular/DD0031">
A page about a tool, with its logo.
</ngmd-hero>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.
export function greet(name: string) {
console.log(`Hello, ${name}`);
}<ngmd-code-block header="src/hello.ts" language="ts" [code]="snippet" />Video
YouTube or Vimeo embed. Pass the canonical watch URL; the component normalises it to the player iframe and lazy-loads.
<ngmd-video
src="https://www.youtube.com/watch?v=_ZcHwv91Rmo"
title="Angular intro"
/>Image
Figure with optional caption. Lazy-loads, applies the standard rounded border so it sits in prose without extra Tailwind.
<ngmd-image
src="/images/cats.jpg"
alt="Two tabby kittens, Angular and Excel, looking up, one sitting in a flower pot"
caption="Angular and Excel."
width="360"
/>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.
<ngmd-accordion>
<ngmd-accordion-item title="When was NgMd released?" open>
Initial public release was May 2026.
</ngmd-accordion-item>
<ngmd-accordion-item title="Does it support i18n?">
Not yet, on the v1 roadmap.
</ngmd-accordion-item>
</ngmd-accordion>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.
<ngmd-card-grid columns="2">
<ngmd-card title="Markdown routes" link="/concepts/markdown-routes" cta="Read">
How file-based routing wires content to URLs.
</ngmd-card>
<ngmd-card title="Theming" link="/concepts/theming" cta="Read">
CSS variable tokens and the fuchsia accent wiring.
</ngmd-card>
</ngmd-card-grid>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.
import {inject} from '@angular/core';
import {ToastService} from '../services/toast/toast.service';
export class MyComponent {
private readonly toast = inject(ToastService);
save() {
this.toast.success('Saved.');
}
failed() {
this.toast.error('Network request failed.');
}
// Pass 0 to keep the toast until the user dismisses it:
// this.toast.info('Heads up.', 0);
}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.
<ngmd-badge variant="beta">Beta</ngmd-badge>
<ngmd-badge variant="deprecated">Deprecated</ngmd-badge>