> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> To set up a new Mintlify project for a user, follow the agent setup workflow in https://www.mintlify.com/docs/quickstart.md.
> For plans and pricing, see https://www.mintlify.com/pricing.md.

# Third-party libraries

> Import React components from npm packages, such as charts and design system components, into your MDX pages.

> [!NOTE]
>
> Third-party libraries require an [Enterprise plan](https://mintlify.com/pricing?ref=third-party-libraries). Contact your account manager to turn them on for your site.

Use components from npm packages, such as charts or your own design system, in your MDX pages. When you deploy, Mintlify installs the packages in your lockfile, renders each component to HTML, and loads its JavaScript in the browser.

> [!WARNING]
>
> Only install packages you trust. Package code runs with the same access as the page, including the page content and anything the reader's browser stores for your site. It can make network requests to any server. Removing a package or rolling back a deployment doesn't stop code that already loaded in a reader's browser.

Third-party libraries aren't available on sites that use [authentication](/docs/deploy/authentication-setup) or [personalization](/docs/create/personalization). Deployments that include `packages` in `docs.json` fail on those sites.

## Add a package

**1. List your dependencies**

Create a `package.json` file in the same folder as your `docs.json` file. List every package you import under `dependencies`, including `react` and `react-dom`.

```json package.json theme={null}
{
  "private": true,
  "dependencies": {
    "@acme/charts": "^2.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}
```

Mintlify installs only `dependencies`. Packages listed only in `devDependencies` or `peerDependencies` aren't available to your pages.

**2. Commit a lockfile**

Install your dependencies and commit the lockfile next to `package.json`.

```bash pnpm theme={null}
pnpm install
```

```bash npm theme={null}
npm install
```

Mintlify installs the exact versions in your lockfile. It supports `pnpm-lock.yaml` version 9 from pnpm and `package-lock.json` from npm. Yarn and Bun lockfiles aren't supported.

**3. Turn on packages**

Add the `packages` key to your `docs.json`. An empty object turns packages on with the default settings.

```json docs.json theme={null}
{
  "packages": {}
}
```

**4. Import a component**

Create a component in your `snippets` folder that imports from the package.

```jsx snippets/requests-chart.jsx theme={null}
import { LineChart } from "@acme/charts";

const data = [
  { day: "Mon", requests: 120 },
  { day: "Tue", requests: 180 },
  { day: "Wed", requests: 150 },
];

export const RequestsChart = () => (
  <LineChart data={data} x="day" y="requests" height={240} />
);
```

Then import it into a page:

```mdx theme={null}
import { RequestsChart } from "/snippets/requests-chart.jsx";

<RequestsChart />
```

**5. Deploy**

Push your changes. If a package can't be installed or built, the deployment fails with an error that names the package and the problem.

To preview locally, install your dependencies and then run [`mint dev`](/docs/cli/preview) from the folder with your `docs.json` file.

## Use package components

You can also import components directly from a package into an MDX page:

```mdx theme={null}
import { Tooltip } from "@acme/ui";

<Tooltip content="Requests per day">Usage</Tooltip>
```

* Place package components on their own lines. They don't work inside a paragraph, a table cell, or inline text.
* Pass strings, numbers, and booleans as props directly. For functions, arrays, objects, or JSX props, write a wrapper component in your `snippets` folder, like the chart in [Add a package](#add-a-package), and pass the values there.
* Markdown inside a package component renders as plain HTML. Mintlify components, such as callouts and cards, don't render inside a package component.

## Load package styles

Components can import their own CSS. To load a stylesheet that a package ships separately, add its path inside the installed package to `packages.css`:

```json docs.json theme={null}
{
  "packages": {
    "css": ["@acme/ui/dist/styles.css"]
  }
}
```

Packages must ship compiled CSS. Mintlify doesn't run CSS build tools or plugins on package code, and doesn't support CSS modules. Package stylesheets can't load fonts or images from remote URLs. Load fonts with your site's [font settings](/docs/customize/fonts) instead.

## Wrap components in a provider

If your components need a theme or context provider, export a `Provider` component from a snippet and set `packages.provider` to its path:

```json docs.json theme={null}
{
  "packages": {
    "provider": "/snippets/provider.jsx"
  }
}
```

```jsx snippets/provider.jsx theme={null}
import { ThemeProvider } from "@acme/ui";

export const Provider = ({ children }) => <ThemeProvider>{children}</ThemeProvider>;
```

The provider wraps each package component separately. Components don't share state through it.

## Install from another registry

Unscoped packages install from the public npm registry. To install a scope from a different registry, map the scope to the registry's URL in `packages.registries`:

```json docs.json theme={null}
{
  "packages": {
    "registries": {
      "@acme": "https://npm.acme.com/"
    }
  }
}
```

The registry must use HTTPS on the default port and be reachable from the public internet without credentials.

## Limitations

* **Dependency sources**: Dependencies must be registry versions, version ranges, or tags. Git URLs, local paths, `file:`, `link:`, `workspace:`, and `npm:` aliases aren't supported.
* **Install scripts**: Packages install without running install scripts such as `postinstall`. Packages that need them, or that need native binaries, don't work.
* **Size**: A deployment's package output can include up to 1,000 files, 8 MB per file, 40 MB in total, and 5 MB gzipped. Packages that load large sets of modules at runtime, such as dynamic icon maps, can go over the file limit.
* **Server rendering**: Each component must render within three seconds on the server. A component that fails or times out renders only in the browser, so it's missing from the page's HTML.
* **Search and AI**: Search, the assistant, and Markdown exports use your MDX source, not the content a component renders. Keep important reference content in your MDX text.
* **Web editor**: The web editor preview doesn't render package components.

To stop using packages, remove `packages` from your `docs.json` file and redeploy.


## Related topics

- [React components](/docs/customize/react-components.md)
- [docs.json schema reference](/docs/organize/settings-reference.md)
- [Integrations](/docs/organize/settings-integrations.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.