Update from code changes: document className prop on components

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).

customize/custom-scripts.mdx

@@ -16,6 +16,14 @@
 - `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
@@ -278,7 +286,7 @@
     - `contextual-feedback-form-submit-button`: Submit button for the contextual feedback form.
   </Accordion>
   <Accordion title="Code snippet feedback">
     - `code-snippet-feedback-popover-content`: Popover content for code snippet feedback.
     - `code-snippet-feedback-form`: Feedback form for a code snippet.
     - `code-snippet-feedback-textarea`: Text area within the code snippet feedback form.
     - `code-snippet-feedback-form-title`: Title of the code snippet feedback form.
@@ -425,7 +433,7 @@
 
 If your site uses [authentication](/deploy/authentication-setup) or [personalization](/create/personalization), custom scripts can read the identified visitor from `window.mintlify.user`. This is the same object exposed to MDX pages as the [`user` variable](/create/personalization#dynamic-mdx-content), so it reflects the `content` field of your user data.
 
 Because custom scripts run before user info resolves, listen for the `mintlify:user` event to identify when the user object is available. The event fires when user info resolves and again on any change. Its `detail` is the user object, or `null` when the visitor is signed out or unidentified.
 
 ```js Read the user after it resolves
 window.addEventListener('mintlify:user', (event) => {
@@ -445,7 +453,7 @@
 }
 ```
 
 `window.mintlify.user` is `undefined` until user info resolves and when the visitor is signed out or unidentified. Use optional chaining when reading nested fields.
 
 <Warning>
   Client-side scripts can access anything you place in the user `content` field. Do not include secrets or credentials that shouldn't be readable in the browser.

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>
+</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).

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

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>
+</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).

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

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.

zh/components/index.mdx

@@ -138,4 +138,16 @@ Mintlify 为你的文档页面提供了内置的 MDX 组件。使用这些组件
 
 <Card title="GitHub" icon="github" href="/zh/components/github">
   嵌入 GitHub 仓库卡片，实时显示 star 和 fork 数量。
-</Card>
+</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)中定义的类。

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