From 86fecb20537129b72235070a8c2efefb3d9bc532 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Fri, 28 Aug 2026 02:00:03 +0000
Subject: [PATCH 1/2] docs: document className prop support on all components

---
 components/index.mdx            | 10 ++++++++++
 customize/custom-scripts.mdx    |  8 ++++++++
 es/components/index.mdx         | 14 +++++++++++++-
 es/customize/custom-scripts.mdx |  8 ++++++++
 fr/components/index.mdx         | 14 +++++++++++++-
 fr/customize/custom-scripts.mdx |  8 ++++++++
 skill.md                        |  2 +-
 zh/components/index.mdx         | 14 +++++++++++++-
 zh/customize/custom-scripts.mdx |  8 ++++++++
 9 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/components/index.mdx b/components/index.mdx
index 559877e637..6e73fc4b08 100644
--- a/components/index.mdx
+++ b/components/index.mdx
@@ -133,3 +133,13 @@ Mintlify provides built-in MDX components for your documentation pages. Use thes
 <Card title="GitHub" icon="github" href="/components/github">
   Embed a GitHub repository card with live stars and forks.
 </Card>
+
+## Style components
+
+Every component accepts an optional `className` prop. Mintlify merges the classes that you pass into the component's outer element, so you can adjust spacing, colors, and other styles without wrapping the component in extra markup.
+
+```mdx className example
+<Note className="mt-0">This callout has no top margin.</Note>
+```
+
+Use [Tailwind CSS](/customize/custom-scripts#style-with-tailwind-css) classes or classes that you define in a [custom CSS file](/customize/custom-scripts#add-custom-css).
diff --git a/customize/custom-scripts.mdx b/customize/custom-scripts.mdx
index 00deccbda7..d63dca2de6 100644
--- a/customize/custom-scripts.mdx
+++ b/customize/custom-scripts.mdx
@@ -16,6 +16,14 @@ Use Tailwind CSS v3 to style HTML elements. You can control layout, spacing, col
 - `block`, `hidden` - Display control
 - `dark:hidden`, `dark:block` - Dark mode visibility
 
+Every [component](/components) also accepts a `className` prop. Mintlify merges the classes that you pass into the component's outer element.
+
+```mdx className example
+<Accordion title="Styled accordion" className="rounded-xl">
+  This accordion has larger rounded corners.
+</Accordion>
+```
+
 Tailwind CSS arbitrary values are not supported. For custom values, use the `style` prop instead.
 
 ```html
diff --git a/es/components/index.mdx b/es/components/index.mdx
index e576d532f6..8753d24ff6 100644
--- a/es/components/index.mdx
+++ b/es/components/index.mdx
@@ -138,4 +138,16 @@ Mintlify proporciona componentes MDX integrados para tus páginas de documentaci
 
 <Card title="GitHub" icon="github" href="/es/components/github">
   Incrusta una tarjeta de repositorio de GitHub con estrellas y forks en vivo.
-</Card>
\ No newline at end of file
+</Card>
+
+<div id="style-components">
+  ## Estiliza los componentes
+</div>
+
+Todos los componentes aceptan una prop opcional `className`. Mintlify combina las clases que pasas en el elemento exterior del componente, por lo que puedes ajustar el espaciado, los colores y otros estilos sin envolver el componente en marcado adicional.
+
+```mdx Ejemplo de className
+<Note className="mt-0">Este callout no tiene margen superior.</Note>
+```
+
+Usa clases de [Tailwind CSS](/es/customize/custom-scripts#style-with-tailwind-css) o clases que definas en un [archivo CSS personalizado](/es/customize/custom-scripts#add-custom-css).
\ No newline at end of file
diff --git a/es/customize/custom-scripts.mdx b/es/customize/custom-scripts.mdx
index 3dcabe6146..c913742b65 100644
--- a/es/customize/custom-scripts.mdx
+++ b/es/customize/custom-scripts.mdx
@@ -18,6 +18,14 @@ Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el diseñ
 * `block`, `hidden` - Control de visualización
 * `dark:hidden`, `dark:block` - Visibilidad en modo oscuro
 
+Todos los [componentes](/es/components) también aceptan una prop `className`. Mintlify combina las clases que pasas en el elemento exterior del componente.
+
+```mdx Ejemplo de className
+<Accordion title="Acordeón con estilo" className="rounded-xl">
+  Este acordeón tiene esquinas más redondeadas.
+</Accordion>
+```
+
 Los valores arbitrarios de Tailwind CSS no están admitidos. Para valores personalizados, usa la prop `style`.
 
 ```html
diff --git a/fr/components/index.mdx b/fr/components/index.mdx
index 8ad9204f22..145881d1bb 100644
--- a/fr/components/index.mdx
+++ b/fr/components/index.mdx
@@ -138,4 +138,16 @@ Mintlify fournit des composants MDX intégrés pour vos pages de documentation.
 
 <Card title="GitHub" icon="github" href="/fr/components/github">
   Intégrez une carte de dépôt GitHub avec le nombre d'étoiles et de forks en direct.
-</Card>
\ No newline at end of file
+</Card>
+
+<div id="style-components">
+  ## Stylisez les composants
+</div>
+
+Chaque composant accepte une prop facultative `className`. Mintlify fusionne les classes que vous transmettez dans l'élément extérieur du composant, ce qui vous permet d'ajuster l'espacement, les couleurs et d'autres styles sans envelopper le composant dans un balisage supplémentaire.
+
+```mdx Exemple de className
+<Note className="mt-0">Ce callout n'a pas de marge supérieure.</Note>
+```
+
+Utilisez des classes [Tailwind CSS](/fr/customize/custom-scripts#style-with-tailwind-css) ou des classes que vous définissez dans un [fichier CSS personnalisé](/fr/customize/custom-scripts#add-custom-css).
\ No newline at end of file
diff --git a/fr/customize/custom-scripts.mdx b/fr/customize/custom-scripts.mdx
index a0ea1393ac..e60606def3 100644
--- a/fr/customize/custom-scripts.mdx
+++ b/fr/customize/custom-scripts.mdx
@@ -18,6 +18,14 @@ Utilisez Tailwind CSS v3 pour styliser les éléments HTML. Vous pouvez contrôl
 * `block`, `hidden` - Contrôle de l'affichage
 * `dark:hidden`, `dark:block` - Visibilité en mode sombre
 
+Chaque [composant](/fr/components) accepte aussi une prop `className`. Mintlify fusionne les classes que vous transmettez dans l'élément extérieur du composant.
+
+```mdx Exemple de className
+<Accordion title="Accordéon stylisé" className="rounded-xl">
+  Cet accordéon a des coins plus arrondis.
+</Accordion>
+```
+
 Les valeurs arbitraires de Tailwind CSS ne sont pas prises en charge. Pour des valeurs personnalisées, utilisez plutôt la prop `style`.
 
 ```html
diff --git a/skill.md b/skill.md
index f7f49cb688..93e56b582a 100644
--- a/skill.md
+++ b/skill.md
@@ -147,7 +147,7 @@ The `navigation` property in `docs.json` controls site structure. Choose one pri
 
 **What to customize where:**
 - **Brand colors, fonts, logo** → `docs.json`. See [global settings](https://mintlify.com/docs/settings/global)
-- **Component styling, layout tweaks** → `custom.css` at project root
+- **Component styling, layout tweaks** → `className` prop on any component, or `custom.css` at project root
 - **Dark mode** → Enabled by default. Only disable with `"appearance": "light"` in `docs.json` if brand requires it
 
 Start with `docs.json`. Only add `custom.css` when you need styling that config doesn't support.
diff --git a/zh/components/index.mdx b/zh/components/index.mdx
index 76b438f3b9..63ed0c74bf 100644
--- a/zh/components/index.mdx
+++ b/zh/components/index.mdx
@@ -138,4 +138,16 @@ Mintlify 为你的文档页面提供了内置的 MDX 组件。使用这些组件
 
 <Card title="GitHub" icon="github" href="/zh/components/github">
   嵌入 GitHub 仓库卡片，实时显示 star 和 fork 数量。
-</Card>
\ No newline at end of file
+</Card>
+
+<div id="style-components">
+  ## 设置组件样式
+</div>
+
+每个组件都接受可选的 `className` 属性。Mintlify 会将你传入的类合并到组件的最外层元素上，因此你无需额外包裹标记即可调整间距、颜色和其他样式。
+
+```mdx className 示例
+<Note className="mt-0">这个提示框没有上边距。</Note>
+```
+
+可以使用 [Tailwind CSS](/zh/customize/custom-scripts#style-with-tailwind-css) 类，或在[自定义 CSS 文件](/zh/customize/custom-scripts#add-custom-css)中定义的类。
\ No newline at end of file
diff --git a/zh/customize/custom-scripts.mdx b/zh/customize/custom-scripts.mdx
index 22622f4f9c..fee77aee85 100644
--- a/zh/customize/custom-scripts.mdx
+++ b/zh/customize/custom-scripts.mdx
@@ -18,6 +18,14 @@ keywords: ["CSS", "JavaScript", "Tailwind CSS", "样式定制", "API Playground"
 * `block`, `hidden` - 显示控制
 * `dark:hidden`, `dark:block` - 深色模式下的可见性
 
+每个[组件](/zh/components)也接受 `className` 属性。Mintlify 会将你传入的类合并到组件的最外层元素上。
+
+```mdx className 示例
+<Accordion title="自定义样式的手风琴" className="rounded-xl">
+  这个手风琴的圆角更大。
+</Accordion>
+```
+
 不支持 Tailwind CSS 的任意值语法。若需自定义值，请改用 `style` 属性。
 
 ```html

From 09338258d1c5cf444c9f043b00743af45bf10574 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Fri, 28 Aug 2026 02:02:15 +0000
Subject: [PATCH 2/2] docs: keep code block titles in English in translated
 pages

---
 es/components/index.mdx         | 2 +-
 es/customize/custom-scripts.mdx | 2 +-
 fr/components/index.mdx         | 2 +-
 fr/customize/custom-scripts.mdx | 2 +-
 zh/components/index.mdx         | 2 +-
 zh/customize/custom-scripts.mdx | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/es/components/index.mdx b/es/components/index.mdx
index 8753d24ff6..74dc90fc2a 100644
--- a/es/components/index.mdx
+++ b/es/components/index.mdx
@@ -146,7 +146,7 @@ Mintlify proporciona componentes MDX integrados para tus páginas de documentaci
 
 Todos los componentes aceptan una prop opcional `className`. Mintlify combina las clases que pasas en el elemento exterior del componente, por lo que puedes ajustar el espaciado, los colores y otros estilos sin envolver el componente en marcado adicional.
 
-```mdx Ejemplo de className
+```mdx className example
 <Note className="mt-0">Este callout no tiene margen superior.</Note>
 ```
 
diff --git a/es/customize/custom-scripts.mdx b/es/customize/custom-scripts.mdx
index c913742b65..902b1dc645 100644
--- a/es/customize/custom-scripts.mdx
+++ b/es/customize/custom-scripts.mdx
@@ -20,7 +20,7 @@ Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el diseñ
 
 Todos los [componentes](/es/components) también aceptan una prop `className`. Mintlify combina las clases que pasas en el elemento exterior del componente.
 
-```mdx Ejemplo de className
+```mdx className example
 <Accordion title="Acordeón con estilo" className="rounded-xl">
   Este acordeón tiene esquinas más redondeadas.
 </Accordion>
diff --git a/fr/components/index.mdx b/fr/components/index.mdx
index 145881d1bb..b234ebdae5 100644
--- a/fr/components/index.mdx
+++ b/fr/components/index.mdx
@@ -146,7 +146,7 @@ Mintlify fournit des composants MDX intégrés pour vos pages de documentation.
 
 Chaque composant accepte une prop facultative `className`. Mintlify fusionne les classes que vous transmettez dans l'élément extérieur du composant, ce qui vous permet d'ajuster l'espacement, les couleurs et d'autres styles sans envelopper le composant dans un balisage supplémentaire.
 
-```mdx Exemple de className
+```mdx className example
 <Note className="mt-0">Ce callout n'a pas de marge supérieure.</Note>
 ```
 
diff --git a/fr/customize/custom-scripts.mdx b/fr/customize/custom-scripts.mdx
index e60606def3..cb99004a58 100644
--- a/fr/customize/custom-scripts.mdx
+++ b/fr/customize/custom-scripts.mdx
@@ -20,7 +20,7 @@ Utilisez Tailwind CSS v3 pour styliser les éléments HTML. Vous pouvez contrôl
 
 Chaque [composant](/fr/components) accepte aussi une prop `className`. Mintlify fusionne les classes que vous transmettez dans l'élément extérieur du composant.
 
-```mdx Exemple de className
+```mdx className example
 <Accordion title="Accordéon stylisé" className="rounded-xl">
   Cet accordéon a des coins plus arrondis.
 </Accordion>
diff --git a/zh/components/index.mdx b/zh/components/index.mdx
index 63ed0c74bf..8fe76147b9 100644
--- a/zh/components/index.mdx
+++ b/zh/components/index.mdx
@@ -146,7 +146,7 @@ Mintlify 为你的文档页面提供了内置的 MDX 组件。使用这些组件
 
 每个组件都接受可选的 `className` 属性。Mintlify 会将你传入的类合并到组件的最外层元素上，因此你无需额外包裹标记即可调整间距、颜色和其他样式。
 
-```mdx className 示例
+```mdx className example
 <Note className="mt-0">这个提示框没有上边距。</Note>
 ```
 
diff --git a/zh/customize/custom-scripts.mdx b/zh/customize/custom-scripts.mdx
index fee77aee85..3dea43ba9f 100644
--- a/zh/customize/custom-scripts.mdx
+++ b/zh/customize/custom-scripts.mdx
@@ -20,7 +20,7 @@ keywords: ["CSS", "JavaScript", "Tailwind CSS", "样式定制", "API Playground"
 
 每个[组件](/zh/components)也接受 `className` 属性。Mintlify 会将你传入的类合并到组件的最外层元素上。
 
-```mdx className 示例
+```mdx className example
 <Accordion title="自定义样式的手风琴" className="rounded-xl">
   这个手风琴的圆角更大。
 </Accordion>