diff --git a/components/index.mdx b/components/index.mdx
index 559877e63..6e73fc4b0 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 00deccbda..d63dca2de 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 e576d532f..74dc90fc2 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 className example
+<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 3dcabe614..902b1dc64 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 className example
+<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 8ad9204f2..b234ebdae 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 className example
+<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 a0ea1393a..cb99004a5 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 className example
+<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 f7f49cb68..93e56b582 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 76b438f3b..8fe76147b 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 example
+<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 22622f4f9..3dea43ba9 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 example
+<Accordion title="自定义样式的手风琴" className="rounded-xl">
+  这个手风琴的圆角更大。
+</Accordion>
+```
+
 不支持 Tailwind CSS 的任意值语法。若需自定义值，请改用 `style` 属性。
 
 ```html