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

# Bibliotecas de terceros

> Importa componentes de React desde paquetes npm, como gráficos y componentes de sistemas de diseño, en tus páginas MDX.

> [!NOTE]
>
> Las bibliotecas de terceros requieren un [plan Enterprise](https://mintlify.com/pricing?ref=third-party-libraries). Contacta a tu gestor de cuenta para activarlas en tu sitio.

Usa componentes de paquetes npm, como gráficos o tu propio sistema de diseño, en tus páginas MDX. Cuando despliegas, Mintlify instala los paquetes de tu lockfile, renderiza cada componente a HTML y carga su JavaScript en el navegador.

> [!WARNING]
>
> Instala solo paquetes en los que confíes. El código de los paquetes se ejecuta con el mismo acceso que la página, incluido el contenido de la página y todo lo que el navegador del lector almacena para tu sitio. Puede realizar solicitudes de red a cualquier servidor. Eliminar un paquete o revertir un despliegue no detiene el código que ya se cargó en el navegador de un lector.

Las bibliotecas de terceros no están disponibles en sitios que usan [autenticación](/docs/es/deploy/authentication-setup) o [personalización](/docs/es/create/personalization). Los despliegues que incluyen `packages` en `docs.json` fallan en esos sitios.

## Agregar un paquete

**1. Enumera tus dependencias**

Crea un archivo `package.json` en la misma carpeta que tu archivo `docs.json`. Enumera cada paquete que importes en `dependencies`, incluidos `react` y `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 instala solo `dependencies`. Los paquetes que solo aparecen en `devDependencies` o `peerDependencies` no están disponibles para tus páginas.

**2. Confirma un lockfile**

Instala tus dependencias y confirma el lockfile junto a `package.json`.

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

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

Mintlify instala las versiones exactas de tu lockfile. Admite `pnpm-lock.yaml` versión 9 de pnpm y `package-lock.json` de npm. Los lockfiles de Yarn y Bun no son compatibles.

**3. Activa los paquetes**

Agrega la clave `packages` a tu `docs.json`. Un objeto vacío activa los paquetes con la configuración predeterminada.

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

**4. Importa un componente**

Crea un componente en tu carpeta `snippets` que importe desde el paquete.

```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} />
);
```

Luego impórtalo en una página:

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

<RequestsChart />
```

**5. Despliega**

Sube tus cambios. Si un paquete no se puede instalar o compilar, el despliegue falla con un error que indica el paquete y el problema.

Para obtener una vista previa local, instala tus dependencias y luego ejecuta [`mint dev`](/docs/es/cli/preview) desde la carpeta que contiene tu archivo `docs.json`.

## Usar componentes de paquetes

También puedes importar componentes directamente desde un paquete en una página MDX:

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

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

* Coloca los componentes de paquetes en sus propias líneas. No funcionan dentro de un párrafo, una celda de tabla o texto en línea.
* Pasa cadenas, números y booleanos directamente como props. Para funciones, arrays, objetos o props JSX, escribe un componente contenedor en tu carpeta `snippets`, como el gráfico de [Agregar un paquete](#add-a-package), y pasa los valores allí.
* El Markdown dentro de un componente de paquete se renderiza como HTML sin formato. Los componentes de Mintlify, como los callouts y las tarjetas, no se renderizan dentro de un componente de paquete.

## Cargar estilos de paquetes

Los componentes pueden importar su propio CSS. Para cargar una hoja de estilos que un paquete distribuye por separado, agrega su ruta dentro del paquete instalado a `packages.css`:

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

Los paquetes deben distribuir CSS compilado. Mintlify no ejecuta herramientas de compilación ni plugins de CSS sobre el código de los paquetes, y no admite módulos CSS. Las hojas de estilos de los paquetes no pueden cargar fuentes ni imágenes desde URL remotas. En su lugar, carga las fuentes con la [configuración de fuentes](/docs/es/customize/fonts) de tu sitio.

## Envolver componentes en un proveedor

Si tus componentes necesitan un proveedor de tema o de contexto, exporta un componente `Provider` desde un snippet y establece `packages.provider` con su ruta:

```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>;
```

El proveedor envuelve cada componente de paquete por separado. Los componentes no comparten estado a través de él.

## Instalar desde otro registro

Los paquetes sin scope se instalan desde el registro público de npm. Para instalar un scope desde un registro diferente, asigna el scope a la URL del registro en `packages.registries`:

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

El registro debe usar HTTPS en el puerto predeterminado y ser accesible desde la internet pública sin credenciales.

## Limitaciones

* **Orígenes de dependencias**: Las dependencias deben ser versiones del registro, rangos de versiones o etiquetas. Las URL de Git, las rutas locales y los alias `file:`, `link:`, `workspace:` y `npm:` no son compatibles.
* **Scripts de instalación**: Los paquetes se instalan sin ejecutar scripts de instalación como `postinstall`. Los paquetes que los necesitan, o que necesitan binarios nativos, no funcionan.
* **Tamaño**: La salida de paquetes de un despliegue puede incluir hasta 1000 archivos, 8 MB por archivo, 40 MB en total y 5 MB comprimidos con gzip. Los paquetes que cargan grandes conjuntos de módulos en tiempo de ejecución, como los mapas de iconos dinámicos, pueden superar el límite de archivos.
* **Renderizado en el servidor**: Cada componente debe renderizarse en menos de tres segundos en el servidor. Un componente que falla o agota el tiempo de espera solo se renderiza en el navegador, por lo que no aparece en el HTML de la página.
* **Búsqueda e IA**: La búsqueda, el asistente y las exportaciones de Markdown usan tu código fuente MDX, no el contenido que renderiza un componente. Mantén el contenido de referencia importante en el texto de tu MDX.
* **Editor web**: La vista previa del editor web no renderiza componentes de paquetes.

Para dejar de usar paquetes, elimina `packages` de tu archivo `docs.json` y vuelve a desplegar.


## Related topics

- [Referencia del esquema docs.json](/docs/es/organize/settings-reference.md)
- [Descripción general](/docs/es/components/index.md)
- [Integraciones](/docs/es/organize/settings-integrations.md)


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