Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion customize/third-party-libraries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,21 @@
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.
</Info>

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.

Check warning on line 11 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L11

Did you really mean 'lockfile'?

<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.
</Warning>

Third-party libraries aren't available on sites that use [authentication](/deploy/authentication-setup) or [personalization](/create/personalization). Deployments that include `packages` in `docs.json` fail on those sites.
Third-party libraries aren't available on sites that use [authentication](/deploy/authentication-setup) or [personalization](/create/personalization). Deployments that include `packages` in `docs.json` fail on those sites. This also applies to [preview deployments](/deploy/preview-deployments#restrict-access-to-preview-deployments) that require organization authentication or a password.

While your site uses third-party libraries, you can't turn on authentication, personalization, or access restrictions for preview deployments.

## Add a package

<Steps>
<Step title="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`.

Check warning on line 25 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L25

Use 'DOM' instead of 'dom'.

```json package.json
{
Expand All @@ -36,7 +38,7 @@
Mintlify installs only `dependencies`. Packages listed only in `devDependencies` or `peerDependencies` aren't available to your pages.
</Step>
<Step title="Commit a lockfile">
Install your dependencies and commit the lockfile next to `package.json`.

Check warning on line 41 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L41

Did you really mean 'lockfile'?

<CodeGroup>
```bash pnpm
Expand Down Expand Up @@ -85,7 +87,7 @@
```
</Step>
<Step title="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.

Check warning on line 90 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L90

In general, use active voice instead of passive voice ('be installed').
</Step>
</Steps>

Expand All @@ -102,12 +104,12 @@
```

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

Check warning on line 107 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L107

Did you really mean 'booleans'?
- 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`:

Check warning on line 112 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L112

Use 'CSS' instead of 'css'.

```json docs.json
{
Expand Down Expand Up @@ -141,7 +143,7 @@

## 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`:

Check warning on line 146 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L146

Did you really mean 'Unscoped'?

```json docs.json
{
Expand All @@ -159,7 +161,7 @@

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

Check warning on line 164 in customize/third-party-libraries.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

customize/third-party-libraries.mdx#L164

Did you really mean 'gzipped'?
- **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.
Expand Down
Loading