mintlify__docs/customize/custom-scripts.mdx

---
title: "Custom scripts"
description: "Add custom JavaScript and CSS scripts to your documentation site for analytics, widgets, styling overrides, and third-party integrations."
keywords: ["CSS", "JavaScript", "Tailwind CSS", "style customization"]
---

Use CSS to style HTML elements or add custom CSS and JavaScript to fully customize the look and feel of your documentation.

## Style with Tailwind CSS

Use Tailwind CSS v3 to style HTML elements. You can control layout, spacing, colors, and other visual properties. Some common classes are:

- `w-full` - Full width
- `aspect-video` - 16:9 aspect ratio
- `rounded-xl` - Large rounded corners
- `block`, `hidden` - Display control
- `dark:hidden`, `dark:block` - Dark mode visibility

Tailwind CSS arbitrary values are not supported. For custom values, use the `style` prop instead.

```html
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
```

<Warning>
  Using the `style` prop can cause a layout shift on page load, especially on custom mode pages. Use Tailwind CSS classes or custom CSS files instead to avoid shifts or flickering.
</Warning>

## Add custom CSS

Add CSS files to your repository to apply their defined class names and make them available in all of your MDX files.

The references and styling of common elements are subject to change. Use custom styling with caution since breaking changes may occur in future updates.

For example, you can add the following `style.css` file to customize the styling of the navbar and footer.

```css
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}
```

Mintlify exposes two types of CSS targeting hooks:

- **ID selectors**: unique page-level elements targeted with `#value { }` in CSS
- **Element selectors**: component and layout elements targeted with `value { }` in CSS (no `#` or `.` prefix)

<Tip>
  Use inspect element to find references to elements you're looking to customize.
</Tip>

### ID selectors

Each ID appears once per page. Use these as `#value` in CSS. For example, `#navbar { background: red; }`.

<AccordionGroup>
<Accordion title="Page layout">
  - `#body-content` — Outermost wrapper for the page body.
  - `#content-area` — Primary content area, excluding the sidebar and table of contents.
  - `#content` — Inner content element within the content area.
  - `#header` — Page-level header element.
  - `#banner` — Announcement banner displayed above the navbar.
  - `#footer` — Page footer. Also targetable as an element selector: `footer`.
  - `#page-title` — The `<h1>` heading at the top of each page.
  - `#pagination` — Bottom pagination bar with previous and next page links.
  - `#panel` — Floating panel overlay. Also targetable as an element selector: `panel`.
  - `#background-color` — Page background color element.
</Accordion>
<Accordion title="Navigation">
  - `#navbar` — Top navigation bar.
  - `#topbar-cta-button` — Call-to-action button in the topbar.
  - `#mobile-nav` — Mobile navigation overlay.
  - `#mobile-nav-content` — Content area within the mobile navigation overlay.
</Accordion>
<Accordion title="Sidebar">
  - `#sidebar` — The sidebar navigation panel.
  - `#sidebar-content` — Scrollable content area within the sidebar.
</Accordion>
<Accordion title="Table of contents">
  - `#table-of-contents` — Table of contents panel on the right side of the page.
  - `#table-of-contents-layout` — Layout wrapper for the table of contents.
  - `#table-of-contents-content` — Scrollable content within the table of contents.
</Accordion>
<Accordion title="Search">
  - `#search-bar-entry` — Search bar trigger in the topbar.
  - `#search-bar-entry-mobile` — Search bar trigger on mobile.
  - `#search-input` — Text input field within the search modal.
</Accordion>
<Accordion title="AI assistant">
  - `#assistant-entry` — AI assistant button in the topbar.
  - `#assistant-entry-mobile` — AI assistant button on mobile.
  - `#chat-assistant-sheet` — AI assistant chat panel.
  - `#chat-assistant-textarea` — Text input within the AI assistant panel.
</Accordion>
<Accordion title="API reference">
  - `#request-example` — Request example panel in the API playground.
  - `#response-example` — Response example panel in the API playground.
  - `#api-playground-input` — Input section of the API playground.
  - `#endpoints-menu-trigger` — Button that opens the endpoint selector dropdown.
</Accordion>
<Accordion title="Code blocks">
  - `#ask-assistant-code-block-button` — "Ask Assistant" button that appears on code blocks.
  - `#code-snippet-feedback-button` — Feedback button on code snippets.
  - `#code-snippet-feedback-textarea` — Text area within the code snippet feedback form.
</Accordion>
<Accordion title="Feedback">
  - `#feedback-thumbs-up` — Thumbs-up feedback button at the bottom of a page.
  - `#feedback-thumbs-down` — Thumbs-down feedback button at the bottom of a page.
  - `#feedback-form` — Feedback form shown after a thumbs-down response.
  - `#feedback-form-input` — Text input within the feedback form.
  - `#feedback-form-cancel` — Cancel button within the feedback form.
  - `#feedback-form-submit` — Submit button within the feedback form.
</Accordion>
<Accordion title="Page context menu">
  - `#page-context-menu` — Contextual options menu for the current page.
  - `#page-context-menu-button` — Button that triggers the page context menu.
</Accordion>
<Accordion title="Localization">
  - `#localization-select-trigger` — Button that opens the language selector.
  - `#localization-select-content` — Dropdown content of the language selector.
  - `#localization-select-item` — Individual language option within the selector.
</Accordion>
<Accordion title="Changelog">
  - `#changelog-filters` — Filter controls on a changelog page.
  - `#changelog-filters-content` — Content area within the changelog filter panel.
</Accordion>
<Accordion title="Multi-view">
  - `#multi-view-dropdown` — Dropdown for switching between documentation views.
</Accordion>
<Accordion title="Text selection">
  - `#text-selection-tooltip` — Tooltip that appears when you select text on a page.
  - `#text-selection-tooltip-button` — Action button within the text selection tooltip.
</Accordion>
</AccordionGroup>

### Element selectors

Multiple instances of these elements can appear on a page. Use these as `value` in CSS. For example, `accordion { border: 1px solid red; }`.

<AccordionGroup>
  <Accordion title="Content components">
    - `accordion` — Collapsible accordion item.
    - `accordion-group` — Wrapper grouping multiple accordions.
    - `callout` — Callout block (Note, Warning, Tip, etc.).
    - `card` — Individual card element.
    - `card-group` — Wrapper grouping multiple cards. Deprecated in favor of `columns`, but preserved for backward compatibility.
    - `columns` — Multi-column layout wrapper.
    - `code-block` — Code block element.
    - `code-block-icon` — Icon displayed in a code block header.
    - `code-group` — Tabbed group of code blocks.
    - `expandable` — Expandable section element.
    - `frame` — Frame wrapper for images or embedded content.
    - `icon` — Inline icon element.
    - `mermaid` — Mermaid diagram wrapper.
    - `step` — Individual step within a steps sequence.
    - `steps` — Numbered steps container.
    - `tab-icon` — Icon displayed within a tab.
    - `tabs` — Tabbed content container.
    - `tile` — Tile component element.
    - `tooltip` — Tooltip element.
    - `update` — Changelog update entry.
  </Accordion>
  <Accordion title="Page layout">
    - `mdx-content` — Rendered MDX content area.
    - `panel` — Floating panel component. Also targetable as an ID selector: `#panel`.
    - `eyebrow` — Small label displayed above a page title.
    - `link` — Anchor link element.
    - `breadcrumb-list` — Breadcrumb navigation list.
    - `breadcrumb-item` — Individual breadcrumb item.
  </Accordion>
  <Accordion title="Topbar navigation">
    - `nav-logo` — Logo in the navigation bar.
    - `navbar-link` — Link element within the navigation bar.
    - `nav-anchors` — Container for anchor links in the topbar.
    - `nav-anchor` — Individual anchor link in the topbar.
    - `nav-tabs` — Tab bar in the top navigation.
    - `nav-tabs-item` — Individual tab item in the top navigation tab bar.
    - `mobile-nav-tabs-item` — Tab item in the mobile navigation tab bar.
    - `topbar-right-container` — Right section of the topbar.
    - `nav-tag-pill` — Tag pill shown in the navigation.
    - `nav-tag-pill-text` — Text within a navigation tag pill.
  </Accordion>
  <Accordion title="Topbar dropdown">
    - `nav-dropdown-trigger` — Button that opens a navigation dropdown.
    - `nav-dropdown-content` — Content container for a navigation dropdown.
    - `nav-dropdown-item` — Individual item within a navigation dropdown.
    - `nav-dropdown-item-text-container` — Text wrapper within a dropdown item.
    - `nav-dropdown-item-title` — Title text within a dropdown item.
    - `nav-dropdown-item-description` — Description text within a dropdown item.
    - `nav-dropdown-item-icon` — Icon within a dropdown item.
  </Accordion>
  <Accordion title="Products selector">
    - `nav-dropdown-products-selector-trigger` — Button that opens the products selector dropdown.
    - `nav-dropdown-products-selector-content` — Content container for the products selector.
    - `nav-dropdown-products-selector-item` — Individual product in the selector.
    - `nav-dropdown-products-selector-item-title` — Title of a product selector item.
    - `nav-dropdown-products-selector-item-description` — Description of a product selector item.
    - `nav-dropdown-products-selector-item-icon` — Icon of a product selector item.
  </Accordion>
  <Accordion title="Sidebar">
    - `sidebar-group` — Group of related sidebar links.
    - `sidebar-group-icon` — Icon for a sidebar group.
    - `sidebar-group-header` — Header label for a sidebar group.
    - `sidebar-title` — Top-level title in the sidebar.
    - `sidebar-nav-group-divider` — Divider between sidebar navigation groups.
  </Accordion>
  <Accordion title="Table of contents">
    - `toc` — Table of contents container.
    - `toc-item` — Individual heading entry in the table of contents.
  </Accordion>
  <Accordion title="Footer">
    - `footer` — Standard page footer. Also targetable as an ID selector: `#footer`.
    - `advanced-footer` — Extended footer with additional columns or content.
  </Accordion>
  <Accordion title="Pagination">
    - `pagination-prev` — Previous page link in the pagination bar.
    - `pagination-next` — Next page link in the pagination bar.
    - `pagination-title` — Page title shown in the pagination bar.
  </Accordion>
  <Accordion title="API reference">
    - `api-section` — Full section for a single API endpoint.
    - `api-section-heading` — Heading area for an API endpoint section.
    - `api-section-heading-title` — Title within an API endpoint section heading.
    - `api-section-heading-subtitle` — Subtitle within an API endpoint section heading.
    - `field` — Parameter or property field in the API reference.
    - `option-dropdown` — Dropdown for selecting between API options.
    - `tryit-button` — "Try it" button that opens the API playground.
    - `method-pill` — HTTP method badge (GET, POST, etc.) on an endpoint.
    - `method-nav-pill` — HTTP method badge shown in the sidebar navigation.
    - `prompt` — Prompt component in the API reference.
  </Accordion>
  <Accordion title="AI assistant">
    - `chat-assistant-sheet` — AI assistant panel container.
    - `chat-assistant-sheet-header` — Header of the AI assistant panel.
    - `chat-assistant-sheet-content` — Content area of the AI assistant panel.
    - `chat-assistant-input` — Text input within the AI assistant panel.
    - `chat-assistant-floating-input` — Floating input variant of the AI assistant.
    - `chat-assistant-send-button` — Send button in the AI assistant panel.
    - `chat-assistant-disclaimer-text` — Disclaimer text displayed in the AI assistant panel.
    - `chat-assistant-payload-item` — Individual message or result item in the assistant panel.
    - `starter-question-text` — Suggested starter question shown in an empty assistant panel.
  </Accordion>
  <Accordion title="Feedback">
    - `feedback-toolbar` — Toolbar containing page feedback controls.
    - `contextual-feedback-container` — Container for contextual inline feedback.
    - `contextual-feedback-form` — Inline contextual feedback form.
    - `contextual-feedback-form-title` — Title of the contextual feedback form.
    - `contextual-feedback-input` — Text input within the contextual feedback form.
    - `contextual-feedback-button` — Action button within the contextual feedback form.
    - `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.
    - `code-snippet-feedback-form-description` — Description text in the code snippet feedback form.
    - `code-snippet-feedback-form-submit-button` — Submit button for the code snippet feedback form.
  </Accordion>
  <Accordion title="Authentication">
    - `login-link` — Link that initiates the login flow.
    - `logout-link` — Link that initiates the logout flow.
  </Accordion>
  <Accordion title="Multi-view">
    - `multi-view-item` — Individual view option in a multi-view switcher.
    - `multi-view-dropdown` — Dropdown for selecting between multiple views.
    - `multi-view-dropdown-trigger` — Button that opens the multi-view dropdown.
    - `multi-view-dropdown-content` — Content area of the multi-view dropdown.
    - `multi-view-dropdown-item` — Individual item within the multi-view dropdown.
  </Accordion>
  <Accordion title="Directory">
    - `directory` — Root container for a directory page.
    - `directory-group` — Group of related pages within a directory.
    - `directory-page` — Individual page entry in a directory.
    - `directory-card` — Card-style page entry in a directory.
  </Accordion>
  <Accordion title="404 page">
    - `not-found-container` — Root container of the 404 page.
    - `not-found-status-code` — Status code display on the 404 page.
    - `not-found-title` — Title heading on the 404 page.
    - `not-found-description` — Description text on the 404 page.
    - `not-found-recommended-pages-list` — List of recommended pages shown on the 404 page.
    - `not-found-recommended-page-link` — Individual link in the recommended pages list.
  </Accordion>
  <Accordion title="Color">
    - `color` — Color swatch element.
    - `color-row` — Row grouping color swatches.
    - `color-item` — Individual color item within a color row.
  </Accordion>
  <Accordion title="Tree">
    - `tree` — File tree container.
    - `tree-folder` — Folder entry within a file tree.
    - `tree-file` — File entry within a file tree.
  </Accordion>
  <Accordion title="Data attributes">
    Some elements expose data attributes you can use as CSS selectors.

    Active state (`data-active`):

    - `nav-dropdown-item[data-active]` — Active item in a nav dropdown.
    - `mobile-nav-tabs-item[data-active]` — Active tab in the mobile nav.
    - `sidebar-group[data-active]` — Active sidebar group.
    - `#sidebar-content li[data-active]` — Active sidebar link.
    - `.nav-tabs-item[data-active]` — Active top nav tab. Only applies to simple tabs; tabs with dropdown menus do not receive `data-active`. Note the leading `.`: this targets a class on a standard `<a>` element, unlike most other components which use custom element names.
    - `toc-item[data-active]` — Active table of contents item.
    - `toc-item[data-active-deepest]` — Deepest active table of contents item. Only present on the exact heading currently in view, unlike `data-active` which is also set on its parent headings.

    Component name (`data-component-name`):

    Use `data-component-name` to target specific UI components with a stable selector that persists if internal class names change.

    - `[data-component-name="mermaid-container"]` — Mermaid diagram wrapper, including the zoom controls overlay.
    - `[data-component-name="mermaid-controls-wrapper"]` — Mermaid zoom and pan controls.
    - `[data-component-name="primary-header-button"]` — Primary header button. Sequoia theme only.
    - `[data-component-name="theme-toggle"]` — Theme toggle.

    Component part (`data-component-part`):

    Use `data-component-part` to target sub-elements within a component.

    - `[data-component-part="contact-support-button"]` — The `<a>` wrapper around the contact support link in the assistant panel.
    - `[data-component-part="contact-support-icon"]` — The `<span>` wrapping the icon.
    - `[data-component-part="contact-support-text"]` — The `<p>` element containing the label.

    Badge attributes:

    - `[data-badge]` — Any badge element.
    - `[data-badge][data-color="blue"]` — Badge filtered by color.
    - `[data-badge][data-size="sm"]` — Badge filtered by size.

    Current path (`data-current-path`):

    Use `data-current-path` to style custom CSS on specific pages or subpaths.

    - `html[data-current-path="/"]` — Matches the root page.
    - `html[data-current-path="/quickstart"]` — Matches a specific page.
    - `html[data-current-path^="/api-reference/"]` — Matches any page under a section.
  </Accordion>
</AccordionGroup>

## Custom JavaScript

Custom JS lets you add custom executable code globally. It is the equivalent of adding a `<script>` tag with JS code into every page.

Mintlify includes any `.js` file inside your content directory on every page of your documentation site. Custom JavaScript files run after the page becomes interactive. You cannot scope them to specific pages. For example, you can add the following `ga.js` file to enable [Google Analytics](https://marketingplatform.google.com/about/analytics) across the entire documentation.

```js
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
```

<Warning>
  Use with caution to avoid introducing security vulnerabilities.
</Warning>