{childTabs.map((tabItem, i) =>
cloneElement(tabItem, {
key: i,
@@ -144,7 +144,7 @@ function TabsComponent(props: Props): ReactNode {
return (
diff --git a/templates/frames.mdx b/templates/frames.mdx
new file mode 100644
index 0000000000..75518a6f20
--- /dev/null
+++ b/templates/frames.mdx
@@ -0,0 +1,234 @@
+---
+title: "Frames: ContentFrame and Panel"
+hide_table_of_contents: false
+sidebar_label: Frames
+---
+
+import Admonition from '@theme/Admonition';
+import ContentFrame from '@site/src/components/ContentFrame';
+import Panel from '@site/src/components/Panel';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Frames overview
+
+This guide shows how to use content frames in MDX: lightweight `ContentFrame` for small/medium chunks and `Panel` for larger sections with a built‑in heading and body.
+
+## ContentFrame
+
+### Import
+```mdx
+import ContentFrame from '@site/src/components/ContentFrame';
+```
+
+### Basic usage
+````mdx
+
+ Text, lists, images, and even code blocks.
+
+ ```ts
+ console.log('Hello world!')
+ ```
+
+````
+
+#### Live example
+
+
+ Text, lists, images, and even code blocks.
+
+ ```ts
+ console.log('Hello world!')
+ ```
+
+
+- Comes with consistent background, border and inner spacing.
+- Has vertical margin by default.
+
+### Flush variant (removes the outer vertical margin)
+```mdx
+
+ 
+
+```
+
+#### Live example
+
+
+
+
+
+
+ Custom font class.
+
+```
+
+#### Live example
+
+
+ Custom font class.
+
+
+## Panel
+
+### Import
+```mdx
+import Panel from '@site/src/components/Panel';
+```
+
+### Basic usage with heading and body
+```mdx
+
+ Content of the section placed inside the panel.
+
+```
+
+#### Live example
+
+
+ Content of the section placed inside the panel.
+
+
+### Heading level
+
+Use `headingLevel` (1–6) to control the semantic level. Default is 2.
+```mdx
+
+ Content...
+
+```
+
+#### Live example
+
+
+ Content...
+
+
+The heading renders via `@theme/Heading`, so it automatically gets the anchor link. The id is generated from the `heading` text.
+
+### Flush variant (removes the outer vertical margin)
+```mdx
+
+
+
+```
+
+#### Live example
+
+
+
+
+
+
+ Content styled with a custom font.
+
+```
+
+#### Live example
+
+
+ Content styled with a custom font.
+
+
+### Nesting frames
+
+You can combine `Panel` and `ContentFrame`:
+```mdx
+
+
+ Short piece of content inside the panel.
+
+
+```
+
+#### Live example
+
+
+
+ Short piece of content inside the panel.
+
+
+
+### Panels with code and tabs
+
+````mdx
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+
+
+ ```csharp
+ // sample code
+ Console.WriteLine("Hello");
+ ```
+
+
+ ```csharp
+ await Console.Out.WriteLineAsync("Hello");
+ ```
+
+
+
+````
+
+#### Live example
+
+
+
+
+ ```csharp
+ // sample code
+ Console.WriteLine("Hello");
+ ```
+
+
+ ```csharp
+ await Console.Out.WriteLineAsync("Hello");
+ ```
+
+
+
+
+## Best practices
+
+- Use `ContentFrame` for short, self‑contained fragments: notes, option lists, compact code examples.
+- Use `Panel` for larger sections: full blocks with headings and multi‑paragraph content.
+- Prefer `flush` when the inner content controls its own spacing (images, embedded widgets).
+- Avoid redundant wrappers — both components already provide consistent background and borders.
+
+
+Keep the heading hierarchy consistent using `headingLevel` to preserve a correct document outline.
+
+
+## Props
+
+### ContentFrame
+
+| Prop | Type | Default | Description |
+| ---------- | ------------------- | ------- | ----------------------------------------------- |
+| children | React.ReactNode | — | Frame content (markdown, code, images, etc.). |
+| className | string | — | Additional classes for custom styling. |
+| flush | boolean | false | Removes only the outer vertical margin. |
+
+### Panel
+
+| Prop | Type | Default | Description |
+| ------------ | ------------------------- | ------- | ---------------------------------------------------------------------- |
+| heading | string | — | Panel heading text. Used to generate the anchor id (slug). |
+| headingLevel | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 2 | Semantic level of the heading (`h1`..`h6`). |
+| children | React.ReactNode | — | Content placed inside the panel body. |
+| className | string | — | Additional classes for custom styling. |
+| flush | boolean | false | Removes only the outer vertical margin. |
\ No newline at end of file
+
+
+ Need spacing after a flush frame? See: [Tailwind margin documentation](https://tailwindcss.com/docs/margin).
+
+
+### Custom classes
+```mdx
+
+
+
+Need spacing after a flush frame? See: [Tailwind margin documentation](https://tailwindcss.com/docs/margin).
+
+
+### Custom classes
+```mdx
+