@kubb/renderer-jsx 5.0.0-beta.23 → 5.0.0-beta.25

package/dist/index.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_jsx_runtime = require("./jsx-runtime-DdmO3p0U.cjs");
 const require_jsx_runtime$1 = require("./jsx-runtime.cjs");
+let yaml = require("yaml");
 let _kubb_ast = require("@kubb/ast");
 //#region ../../internals/utils/src/context.ts
 /**
@@ -109,6 +110,64 @@ function onProcessExit(callback) {
 	return unsubscribe;
 }
 //#endregion
+//#region src/components/Callout.tsx
+const CALLOUT_LABEL = {
+	tip: "TIP",
+	note: "NOTE",
+	important: "IMPORTANT",
+	warning: "WARNING",
+	caution: "CAUTION"
+};
+/**
+* Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+* VitePress, Obsidian, and MDX.
+*
+* Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+* body with every line prefixed by `> `.
+*
+* @example
+* ```tsx
+* <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+* // > [!TIP]
+* // > Run `kubb start --watch` to keep the generator hot.
+*
+* <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+* // > [!WARNING] Heads up
+* // > Breaking change in v6.
+* ```
+*/
+function Callout({ type, title, children }) {
+	const label = CALLOUT_LABEL[type];
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "callout",
+		children: `${title ? `> [!${label}] ${title}` : `> [!${label}]`}\n${children.trimEnd().split("\n").map((line) => line.length > 0 ? `> ${line}` : ">").join("\n")}`
+	});
+}
+Callout.displayName = "Callout";
+//#endregion
+//#region src/components/CodeBlock.tsx
+/**
+* Renders a fenced markdown code block.
+*
+* Emits a `<File.Source>` block containing the children wrapped in
+* triple-backtick fences with an optional language tag.
+*
+* @example
+* ```tsx
+* <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+* // ```typescript
+* // const pet = { id: 1 }
+* // ```
+* ```
+*/
+function CodeBlock({ lang, children }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "codeBlock",
+		children: `\`\`\`${lang ?? ""}\n${children}\n\`\`\``
+	});
+}
+CodeBlock.displayName = "CodeBlock";
+//#endregion
 //#region src/components/Const.tsx
 /**
 * Generates a TypeScript constant declaration.
@@ -263,6 +322,33 @@ File.Export = FileExport;
 File.Import = FileImport;
 File.Source = FileSource;
 //#endregion
+//#region src/components/Frontmatter.tsx
+/**
+* Emits a YAML frontmatter envelope at the top of a generated markdown file.
+*
+* Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+* the first child of `<File>` so it appears at the top of the output. Pair with
+* `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+* static-site generators) treats as frontmatter.
+*
+* @example Page frontmatter at the top of a generated markdown file
+* ```tsx
+* <File baseName="pets.md" path="src/pets.md">
+*   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+*   <File.Source>
+*     {'# Pets\n\nList of pets.'}
+*   </File.Source>
+* </File>
+* ```
+*/
+function Frontmatter({ data }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "frontmatter",
+		children: `---\n${(0, yaml.stringify)(data).trimEnd()}\n---`
+	});
+}
+Frontmatter.displayName = "Frontmatter";
+//#endregion
 //#region src/components/Function.tsx
 /**
 * Generates a TypeScript function declaration.
@@ -324,6 +410,27 @@ function ArrowFunction({ children, ...props }) {
 ArrowFunction.displayName = "ArrowFunction";
 Function$1.Arrow = ArrowFunction;
 //#endregion
+//#region src/components/Heading.tsx
+/**
+* Renders an ATX-style markdown heading.
+*
+* Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+* Use inside a `<File>` rendered by `parserMd`.
+*
+* @example
+* ```tsx
+* <Heading level={2}>Installation</Heading>
+* // ## Installation
+* ```
+*/
+function Heading({ level, children }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "heading",
+		children: `${"#".repeat(level)} ${children}`
+	});
+}
+Heading.displayName = "Heading";
+//#endregion
 //#region src/components/Jsx.tsx
 /**
 * Embeds a raw JSX string verbatim in the generated source code.
@@ -345,6 +452,53 @@ function Jsx({ children }) {
 }
 Jsx.displayName = "Jsx";
 //#endregion
+//#region src/components/List.tsx
+/**
+* Renders a markdown list.
+*
+* Emits a `<File.Source>` block containing one entry per line, prefixed with
+* `1.` / `2.` … when `ordered`, or `-` otherwise.
+*
+* @example
+* ```tsx
+* <List items={['Add the parser', 'Render the page']} />
+* // - Add the parser
+* // - Render the page
+*
+* <List ordered items={['First', 'Second']} />
+* // 1. First
+* // 2. Second
+* ```
+*/
+function List({ ordered, items }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "list",
+		children: items.map((item, index) => `${ordered ? `${index + 1}.` : "-"} ${item}`).join("\n")
+	});
+}
+List.displayName = "List";
+//#endregion
+//#region src/components/Paragraph.tsx
+/**
+* Renders a markdown paragraph.
+*
+* Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+* separated from surrounding blocks by blank lines via the parser's source
+* joining.
+*
+* @example
+* ```tsx
+* <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+* ```
+*/
+function Paragraph({ children }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "paragraph",
+		children
+	});
+}
+Paragraph.displayName = "Paragraph";
+//#endregion
 //#region src/components/Root.tsx
 var import_react = /* @__PURE__ */ require_jsx_runtime.__toESM(require_jsx_runtime.require_react());
 var ErrorBoundary = class extends import_react.Component {
@@ -18487,10 +18641,16 @@ const jsxRendererSync = () => {
 	};
 };
 //#endregion
+exports.Callout = Callout;
+exports.CodeBlock = CodeBlock;
 exports.Const = Const;
 exports.File = File;
+exports.Frontmatter = Frontmatter;
 exports.Function = Function$1;
+exports.Heading = Heading;
 exports.Jsx = Jsx;
+exports.List = List;
+exports.Paragraph = Paragraph;
 exports.Root = Root;
 exports.Type = Type;
 exports.createContext = createContext;

package/dist/index.d.ts

@@ -47,6 +47,95 @@ declare function unprovide<T>(key: symbol | Context<T>): void;
  */
 declare function createContext<T>(defaultValue: T): Context<T>;
 //#endregion
+//#region src/components/Callout.d.ts
+declare const CALLOUT_LABEL: {
+  readonly tip: "TIP";
+  readonly note: "NOTE";
+  readonly important: "IMPORTANT";
+  readonly warning: "WARNING";
+  readonly caution: "CAUTION";
+};
+type CalloutType = keyof typeof CALLOUT_LABEL;
+type Props$8 = {
+  key?: Key;
+  /**
+   * Callout kind. Maps to the uppercase label inside the `> [!TYPE]` marker.
+   */
+  type: CalloutType;
+  /**
+   * Optional title rendered on the same line as the marker.
+   */
+  title?: string | null;
+  /**
+   * Body text. Each line is quoted with `> ` so multi-line content stays
+   * inside the callout block.
+   */
+  children: string;
+};
+/**
+ * Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+ * VitePress, Obsidian, and MDX.
+ *
+ * Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+ * body with every line prefixed by `> `.
+ *
+ * @example
+ * ```tsx
+ * <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+ * // > [!TIP]
+ * // > Run `kubb start --watch` to keep the generator hot.
+ *
+ * <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+ * // > [!WARNING] Heads up
+ * // > Breaking change in v6.
+ * ```
+ */
+declare function Callout({
+  type,
+  title,
+  children
+}: Props$8): KubbReactElement;
+declare namespace Callout {
+  var displayName: string;
+}
+//#endregion
+//#region src/components/CodeBlock.d.ts
+type Props$7 = {
+  key?: Key;
+  /**
+   * Language tag for syntax highlighting. Rendered after the opening fence.
+   *
+   * @example
+   * `lang: 'typescript'`
+   */
+  lang?: string;
+  /**
+   * Code body. Wrapped in triple-backtick fences as-is.
+   */
+  children: string;
+};
+/**
+ * Renders a fenced markdown code block.
+ *
+ * Emits a `<File.Source>` block containing the children wrapped in
+ * triple-backtick fences with an optional language tag.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+ * // ```typescript
+ * // const pet = { id: 1 }
+ * // ```
+ * ```
+ */
+declare function CodeBlock({
+  lang,
+  children
+}: Props$7): KubbReactElement;
+declare namespace CodeBlock {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Const.d.ts
 type ConstProps = {
   key?: Key;
@@ -143,7 +232,7 @@ type BasePropsWithoutBaseName = {
   path?: string | null;
 };
 type BaseProps = BasePropsWithBaseName | BasePropsWithoutBaseName;
-type Props$2<TMeta> = BaseProps & {
+type Props$6<TMeta> = BaseProps & {
   key?: Key;
   /**
    * Arbitrary metadata attached to the file node.
@@ -184,7 +273,7 @@ type Props$2<TMeta> = BaseProps & {
 declare function File<TMeta extends object = object>({
   children,
   ...props
-}: Props$2<TMeta>): KubbReactElement;
+}: Props$6<TMeta>): KubbReactElement;
 declare namespace File {
   var displayName: string;
   var Export: typeof FileExport;
@@ -280,8 +369,44 @@ declare namespace FileImport {
   var displayName: string;
 }
 //#endregion
+//#region src/components/Frontmatter.d.ts
+type Props$5 = {
+  key?: Key;
+  /**
+   * Plain object serialised as YAML between `---` fences.
+   *
+   * @example
+   * `data: { title: 'Pets', layout: 'doc' }`
+   */
+  data: Record<string, unknown>;
+};
+/**
+ * Emits a YAML frontmatter envelope at the top of a generated markdown file.
+ *
+ * Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+ * the first child of `<File>` so it appears at the top of the output. Pair with
+ * `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+ * static-site generators) treats as frontmatter.
+ *
+ * @example Page frontmatter at the top of a generated markdown file
+ * ```tsx
+ * <File baseName="pets.md" path="src/pets.md">
+ *   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+ *   <File.Source>
+ *     {'# Pets\n\nList of pets.'}
+ *   </File.Source>
+ * </File>
+ * ```
+ */
+declare function Frontmatter({
+  data
+}: Props$5): KubbReactElement;
+declare namespace Frontmatter {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Function.d.ts
-type Props$1 = {
+type Props$4 = {
   key?: Key;
   /**
    * Identifier of the generated function declaration.
@@ -362,12 +487,12 @@ type Props$1 = {
 declare function Function({
   children,
   ...props
-}: Props$1): KubbReactElement;
+}: Props$4): KubbReactElement;
 declare namespace Function {
   var displayName: string;
   var Arrow: typeof ArrowFunction;
 }
-type ArrowFunctionProps = Props$1 & {
+type ArrowFunctionProps = Props$4 & {
   /**
    * Render the arrow function as a single-line expression (no braces around the body).
    * - `true` generates `const name = (…) => expression`
@@ -397,8 +522,42 @@ declare namespace ArrowFunction {
   var displayName: string;
 }
 //#endregion
+//#region src/components/Heading.d.ts
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+type Props$3 = {
+  key?: Key;
+  /**
+   * Heading depth, `1` through `6`. Matches the number of `#` characters
+   * prefixed to the heading text.
+   */
+  level: Level;
+  /**
+   * Heading text. Inline markdown (links, emphasis) is passed through verbatim.
+   */
+  children: string;
+};
+/**
+ * Renders an ATX-style markdown heading.
+ *
+ * Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+ * Use inside a `<File>` rendered by `parserMd`.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={2}>Installation</Heading>
+ * // ## Installation
+ * ```
+ */
+declare function Heading({
+  level,
+  children
+}: Props$3): KubbReactElement;
+declare namespace Heading {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Jsx.d.ts
-type Props = {
+type Props$2 = {
   /**
    * Raw JSX string to embed verbatim in the generated code.
    * Supports JSX fragments (`<>…</>`), elements, and any valid JSX syntax.
@@ -426,11 +585,79 @@ type Props = {
  */
 declare function Jsx({
   children
-}: Props): KubbReactElement;
+}: Props$2): KubbReactElement;
 declare namespace Jsx {
   var displayName: string;
 }
 //#endregion
+//#region src/components/List.d.ts
+type Props$1 = {
+  key?: Key;
+  /**
+   * When `true`, emits a numbered list (`1. …`). When `false` or omitted,
+   * emits a bullet list (`- …`).
+   *
+   * @default false
+   */
+  ordered?: boolean | null;
+  /**
+   * One entry per line. Inline markdown is passed through verbatim.
+   */
+  items: ReadonlyArray<string>;
+};
+/**
+ * Renders a markdown list.
+ *
+ * Emits a `<File.Source>` block containing one entry per line, prefixed with
+ * `1.` / `2.` … when `ordered`, or `-` otherwise.
+ *
+ * @example
+ * ```tsx
+ * <List items={['Add the parser', 'Render the page']} />
+ * // - Add the parser
+ * // - Render the page
+ *
+ * <List ordered items={['First', 'Second']} />
+ * // 1. First
+ * // 2. Second
+ * ```
+ */
+declare function List({
+  ordered,
+  items
+}: Props$1): KubbReactElement;
+declare namespace List {
+  var displayName: string;
+}
+//#endregion
+//#region src/components/Paragraph.d.ts
+type Props = {
+  key?: Key;
+  /**
+   * Paragraph text. Inline markdown (links, emphasis, code spans) is passed
+   * through verbatim.
+   */
+  children: string;
+};
+/**
+ * Renders a markdown paragraph.
+ *
+ * Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+ * separated from surrounding blocks by blank lines via the parser's source
+ * joining.
+ *
+ * @example
+ * ```tsx
+ * <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+ * ```
+ */
+declare function Paragraph({
+  children
+}: Props): KubbReactElement;
+declare namespace Paragraph {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Root.d.ts
 type RootProps = {
   /**
@@ -603,5 +830,5 @@ declare const jsxRendererSync: () => {
   [Symbol.dispose](): void;
 };
 //#endregion
-export { Const, File, Function, Jsx, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
+export { Callout, CodeBlock, Const, File, Frontmatter, Function, Heading, Jsx, List, Paragraph, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,6 +1,7 @@
 import { n as __name, r as __toESM, t as __commonJSMin } from "./chunk-Bb7HlUDG.js";
 import { n as require_react } from "./jsx-runtime-Cvu_ZYgL.js";
 import { Fragment, jsx } from "./jsx-runtime.js";
+import { stringify } from "yaml";
 import { createArrowFunction, createBreak, createConst, createExport, createFunction, createImport, createJsx, createSource, createText, createType } from "@kubb/ast";
 //#region ../../internals/utils/src/context.ts
 /**
@@ -109,6 +110,64 @@ function onProcessExit(callback) {
 	return unsubscribe;
 }
 //#endregion
+//#region src/components/Callout.tsx
+const CALLOUT_LABEL = {
+	tip: "TIP",
+	note: "NOTE",
+	important: "IMPORTANT",
+	warning: "WARNING",
+	caution: "CAUTION"
+};
+/**
+* Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+* VitePress, Obsidian, and MDX.
+*
+* Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+* body with every line prefixed by `> `.
+*
+* @example
+* ```tsx
+* <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+* // > [!TIP]
+* // > Run `kubb start --watch` to keep the generator hot.
+*
+* <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+* // > [!WARNING] Heads up
+* // > Breaking change in v6.
+* ```
+*/
+function Callout({ type, title, children }) {
+	const label = CALLOUT_LABEL[type];
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "callout",
+		children: `${title ? `> [!${label}] ${title}` : `> [!${label}]`}\n${children.trimEnd().split("\n").map((line) => line.length > 0 ? `> ${line}` : ">").join("\n")}`
+	});
+}
+Callout.displayName = "Callout";
+//#endregion
+//#region src/components/CodeBlock.tsx
+/**
+* Renders a fenced markdown code block.
+*
+* Emits a `<File.Source>` block containing the children wrapped in
+* triple-backtick fences with an optional language tag.
+*
+* @example
+* ```tsx
+* <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+* // ```typescript
+* // const pet = { id: 1 }
+* // ```
+* ```
+*/
+function CodeBlock({ lang, children }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "codeBlock",
+		children: `\`\`\`${lang ?? ""}\n${children}\n\`\`\``
+	});
+}
+CodeBlock.displayName = "CodeBlock";
+//#endregion
 //#region src/components/Const.tsx
 /**
 * Generates a TypeScript constant declaration.
@@ -263,6 +322,33 @@ File.Export = FileExport;
 File.Import = FileImport;
 File.Source = FileSource;
 //#endregion
+//#region src/components/Frontmatter.tsx
+/**
+* Emits a YAML frontmatter envelope at the top of a generated markdown file.
+*
+* Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+* the first child of `<File>` so it appears at the top of the output. Pair with
+* `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+* static-site generators) treats as frontmatter.
+*
+* @example Page frontmatter at the top of a generated markdown file
+* ```tsx
+* <File baseName="pets.md" path="src/pets.md">
+*   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+*   <File.Source>
+*     {'# Pets\n\nList of pets.'}
+*   </File.Source>
+* </File>
+* ```
+*/
+function Frontmatter({ data }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "frontmatter",
+		children: `---\n${stringify(data).trimEnd()}\n---`
+	});
+}
+Frontmatter.displayName = "Frontmatter";
+//#endregion
 //#region src/components/Function.tsx
 /**
 * Generates a TypeScript function declaration.
@@ -324,6 +410,27 @@ function ArrowFunction({ children, ...props }) {
 ArrowFunction.displayName = "ArrowFunction";
 Function$1.Arrow = ArrowFunction;
 //#endregion
+//#region src/components/Heading.tsx
+/**
+* Renders an ATX-style markdown heading.
+*
+* Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+* Use inside a `<File>` rendered by `parserMd`.
+*
+* @example
+* ```tsx
+* <Heading level={2}>Installation</Heading>
+* // ## Installation
+* ```
+*/
+function Heading({ level, children }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "heading",
+		children: `${"#".repeat(level)} ${children}`
+	});
+}
+Heading.displayName = "Heading";
+//#endregion
 //#region src/components/Jsx.tsx
 /**
 * Embeds a raw JSX string verbatim in the generated source code.
@@ -345,6 +452,53 @@ function Jsx({ children }) {
 }
 Jsx.displayName = "Jsx";
 //#endregion
+//#region src/components/List.tsx
+/**
+* Renders a markdown list.
+*
+* Emits a `<File.Source>` block containing one entry per line, prefixed with
+* `1.` / `2.` … when `ordered`, or `-` otherwise.
+*
+* @example
+* ```tsx
+* <List items={['Add the parser', 'Render the page']} />
+* // - Add the parser
+* // - Render the page
+*
+* <List ordered items={['First', 'Second']} />
+* // 1. First
+* // 2. Second
+* ```
+*/
+function List({ ordered, items }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "list",
+		children: items.map((item, index) => `${ordered ? `${index + 1}.` : "-"} ${item}`).join("\n")
+	});
+}
+List.displayName = "List";
+//#endregion
+//#region src/components/Paragraph.tsx
+/**
+* Renders a markdown paragraph.
+*
+* Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+* separated from surrounding blocks by blank lines via the parser's source
+* joining.
+*
+* @example
+* ```tsx
+* <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+* ```
+*/
+function Paragraph({ children }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "paragraph",
+		children
+	});
+}
+Paragraph.displayName = "Paragraph";
+//#endregion
 //#region src/components/Root.tsx
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var ErrorBoundary = class extends import_react.Component {
@@ -18484,6 +18638,6 @@ const jsxRendererSync = () => {
 	};
 };
 //#endregion
-export { Const, File, Function$1 as Function, Jsx, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
+export { Callout, CodeBlock, Const, File, Frontmatter, Function$1 as Function, Heading, Jsx, List, Paragraph, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
 
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubb/renderer-jsx",
-  "version": "5.0.0-beta.23",
+  "version": "5.0.0-beta.25",
   "description": "JSX-based renderer for Kubb. Provides a custom React runtime, reconciler, and built-in components (File, Function, Type, Const) for component-based, type-safe code generation.",
   "keywords": [
     "codegen",
@@ -75,7 +75,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@kubb/ast": "5.0.0-beta.23"
+    "yaml": "^2.8.1",
+    "@kubb/ast": "5.0.0-beta.25"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/components/Callout.tsx

@@ -0,0 +1,59 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+const CALLOUT_LABEL = {
+  tip: 'TIP',
+  note: 'NOTE',
+  important: 'IMPORTANT',
+  warning: 'WARNING',
+  caution: 'CAUTION',
+} as const
+
+export type CalloutType = keyof typeof CALLOUT_LABEL
+
+type Props = {
+  key?: Key
+  /**
+   * Callout kind. Maps to the uppercase label inside the `> [!TYPE]` marker.
+   */
+  type: CalloutType
+  /**
+   * Optional title rendered on the same line as the marker.
+   */
+  title?: string | null
+  /**
+   * Body text. Each line is quoted with `> ` so multi-line content stays
+   * inside the callout block.
+   */
+  children: string
+}
+
+/**
+ * Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+ * VitePress, Obsidian, and MDX.
+ *
+ * Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+ * body with every line prefixed by `> `.
+ *
+ * @example
+ * ```tsx
+ * <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+ * // > [!TIP]
+ * // > Run `kubb start --watch` to keep the generator hot.
+ *
+ * <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+ * // > [!WARNING] Heads up
+ * // > Breaking change in v6.
+ * ```
+ */
+export function Callout({ type, title, children }: Props): KubbReactElement {
+  const label = CALLOUT_LABEL[type]
+  const header = title ? `> [!${label}] ${title}` : `> [!${label}]`
+  const quoted = children
+    .trimEnd()
+    .split('\n')
+    .map((line) => (line.length > 0 ? `> ${line}` : '>'))
+    .join('\n')
+  return <kubb-source name="callout">{`${header}\n${quoted}`}</kubb-source>
+}
+
+Callout.displayName = 'Callout'

package/src/components/CodeBlock.tsx

@@ -0,0 +1,37 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Language tag for syntax highlighting. Rendered after the opening fence.
+   *
+   * @example
+   * `lang: 'typescript'`
+   */
+  lang?: string
+  /**
+   * Code body. Wrapped in triple-backtick fences as-is.
+   */
+  children: string
+}
+
+/**
+ * Renders a fenced markdown code block.
+ *
+ * Emits a `<File.Source>` block containing the children wrapped in
+ * triple-backtick fences with an optional language tag.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+ * // ```typescript
+ * // const pet = { id: 1 }
+ * // ```
+ * ```
+ */
+export function CodeBlock({ lang, children }: Props): KubbReactElement {
+  const fence = `\`\`\`${lang ?? ''}\n${children}\n\`\`\``
+  return <kubb-source name="codeBlock">{fence}</kubb-source>
+}
+
+CodeBlock.displayName = 'CodeBlock'

package/src/components/Frontmatter.tsx

@@ -0,0 +1,38 @@
+import { stringify } from 'yaml'
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Plain object serialised as YAML between `---` fences.
+   *
+   * @example
+   * `data: { title: 'Pets', layout: 'doc' }`
+   */
+  data: Record<string, unknown>
+}
+
+/**
+ * Emits a YAML frontmatter envelope at the top of a generated markdown file.
+ *
+ * Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+ * the first child of `<File>` so it appears at the top of the output. Pair with
+ * `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+ * static-site generators) treats as frontmatter.
+ *
+ * @example Page frontmatter at the top of a generated markdown file
+ * ```tsx
+ * <File baseName="pets.md" path="src/pets.md">
+ *   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+ *   <File.Source>
+ *     {'# Pets\n\nList of pets.'}
+ *   </File.Source>
+ * </File>
+ * ```
+ */
+export function Frontmatter({ data }: Props): KubbReactElement {
+  const envelope = `---\n${stringify(data).trimEnd()}\n---`
+  return <kubb-source name="frontmatter">{envelope}</kubb-source>
+}
+
+Frontmatter.displayName = 'Frontmatter'

package/src/components/Heading.tsx

@@ -0,0 +1,34 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6
+
+type Props = {
+  key?: Key
+  /**
+   * Heading depth, `1` through `6`. Matches the number of `#` characters
+   * prefixed to the heading text.
+   */
+  level: Level
+  /**
+   * Heading text. Inline markdown (links, emphasis) is passed through verbatim.
+   */
+  children: string
+}
+
+/**
+ * Renders an ATX-style markdown heading.
+ *
+ * Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+ * Use inside a `<File>` rendered by `parserMd`.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={2}>Installation</Heading>
+ * // ## Installation
+ * ```
+ */
+export function Heading({ level, children }: Props): KubbReactElement {
+  return <kubb-source name="heading">{`${'#'.repeat(level)} ${children}`}</kubb-source>
+}
+
+Heading.displayName = 'Heading'

package/src/components/List.tsx

@@ -0,0 +1,40 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * When `true`, emits a numbered list (`1. …`). When `false` or omitted,
+   * emits a bullet list (`- …`).
+   *
+   * @default false
+   */
+  ordered?: boolean | null
+  /**
+   * One entry per line. Inline markdown is passed through verbatim.
+   */
+  items: ReadonlyArray<string>
+}
+
+/**
+ * Renders a markdown list.
+ *
+ * Emits a `<File.Source>` block containing one entry per line, prefixed with
+ * `1.` / `2.` … when `ordered`, or `-` otherwise.
+ *
+ * @example
+ * ```tsx
+ * <List items={['Add the parser', 'Render the page']} />
+ * // - Add the parser
+ * // - Render the page
+ *
+ * <List ordered items={['First', 'Second']} />
+ * // 1. First
+ * // 2. Second
+ * ```
+ */
+export function List({ ordered, items }: Props): KubbReactElement {
+  const body = items.map((item, index) => `${ordered ? `${index + 1}.` : '-'} ${item}`).join('\n')
+  return <kubb-source name="list">{body}</kubb-source>
+}
+
+List.displayName = 'List'

package/src/components/Paragraph.tsx

@@ -0,0 +1,28 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Paragraph text. Inline markdown (links, emphasis, code spans) is passed
+   * through verbatim.
+   */
+  children: string
+}
+
+/**
+ * Renders a markdown paragraph.
+ *
+ * Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+ * separated from surrounding blocks by blank lines via the parser's source
+ * joining.
+ *
+ * @example
+ * ```tsx
+ * <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+ * ```
+ */
+export function Paragraph({ children }: Props): KubbReactElement {
+  return <kubb-source name="paragraph">{children}</kubb-source>
+}
+
+Paragraph.displayName = 'Paragraph'

package/src/index.ts

@@ -1,8 +1,14 @@
 export { createContext, inject, provide, unprovide } from '@internals/utils'
+export { Callout } from './components/Callout.tsx'
+export { CodeBlock } from './components/CodeBlock.tsx'
 export { Const } from './components/Const.tsx'
 export { File } from './components/File.tsx'
+export { Frontmatter } from './components/Frontmatter.tsx'
 export { Function } from './components/Function.tsx'
+export { Heading } from './components/Heading.tsx'
 export { Jsx } from './components/Jsx.tsx'
+export { List } from './components/List.tsx'
+export { Paragraph } from './components/Paragraph.tsx'
 export { Root } from './components/Root.tsx'
 export { Type } from './components/Type.tsx'
 export { jsxRenderer, jsxRendererSync } from './createRenderer.tsx'