Crear diseños de página personalizados

Las páginas de Mintlify usan un diseño estándar de forma predeterminada, con una barra lateral, un área de contenido y una tabla de contenidos. Personaliza este diseño con los modos de página para crear páginas de destino, vitrinas de funcionalidades o cualquier página que necesite un diseño único. Esta guía cubre cómo usar los modos de página, Tailwind CSS y los componentes para crear diseños personalizados.

Elige un modo de página

Configura el campo mode en el frontmatter de tu página para controlar qué elementos de la interfaz aparecen.

Modo	Barra lateral	Tabla de contenidos	Pie de página	Soporte de temas	Ideal para
`default`	Sí	Sí	Sí	Todos los temas	Páginas de documentación estándar
`wide`	Sí	No	Sí	Todos los temas	Páginas sin encabezados o que necesitan mayor ancho
`custom`	No	No	No	Todos los temas	Páginas de destino, páginas de marketing o diseños de lienzo completo
`frame`	Sí	No	Modificado	Aspen, Almond, Luma, Sequoia	Contenido personalizado que aún necesita navegación por barra lateral
`center`	No	No	Sí	Mint, Linden, Willow, Maple	Registros de cambios, experiencias de lectura enfocada

Para páginas de destino, el modo custom te brinda el mayor control. Elimina todos los elementos de la interfaz excepto la barra de navegación superior, proporcionándote un lienzo en blanco para construir. Las páginas en modo custom no tienen tipografía predeterminada. Los elementos HTML nativos como <h2> y <p> se muestran con los estilos predeterminados del navegador, así que dales estilo explícitamente con clases de Tailwind CSS.

Example page frontmatter

---
title: "Welcome"
mode: "custom"
---

Crea una página de destino

Una página de destino típica combina una sección hero, tarjetas de funcionalidades y llamadas a la acción.

Configura la página

Crea un archivo MDX con el modo custom:

Example landing page frontmatter

---
title: "Documentation"
description: "Everything you need to build with our platform."
mode: "custom"
---

Crea una sección hero

Usa HTML con clases de Tailwind CSS para construir una sección hero centrada:

Example hero section

<div className="px-4 py-16 lg:py-32 max-w-3xl mx-auto text-center">
  <h1 className="text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
    Documentation
  </h1>
  <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500">
    Everything you need to build, deploy, and scale your application.
  </p>
</div>

Incluye estilos tanto para el modo claro como para el modo oscuro. Usa las clases de Tailwind con el prefijo dark: para gestionar el modo oscuro.

Usa los componentes Card y Columns para crear una cuadrícula de enlaces debajo de la sección hero:

Example navigation cards

<div className="max-w-4xl mx-auto px-6">
  <Columns cols={2}>
    <Card title="Quickstart" icon="rocket" href="/quickstart">
      Get up and running in under five minutes.
    </Card>
    <Card title="API reference" icon="code" href="/api-reference">
      Explore endpoints, parameters, and examples.
    </Card>
    <Card title="Guides" icon="book" href="/guides">
      Step-by-step tutorials for common tasks.
    </Card>
    <Card title="Components" icon="puzzle" href="/components">
      Reusable UI components for your docs.
    </Card>
  </Columns>
</div>

Usa imágenes con soporte para modo oscuro

Muestra diferentes imágenes para el modo claro y oscuro usando las clases de visibilidad de Tailwind:

Example images with dark mode support

<img
  src="/images/hero-light.png"
  alt="Platform overview showing the main dashboard."
  className="block dark:hidden"
/>
<img
  src="/images/hero-dark.png"
  alt="Platform overview showing the main dashboard."
  className="hidden dark:block"
/>

Usa componentes de React para diseños interactivos

Para elementos reutilizables o interactivos, define componentes de React directamente en tu archivo MDX:

Example React component

export const FeatureCard = ({ title, description, href }) => (
  <a className="group block p-6 rounded-xl border border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 transition-colors" href={href}>
    <h3 className="font-medium text-gray-900 dark:text-zinc-50 group-hover:underline">
      {title}
    </h3>
    <p className="mt-2 text-sm text-gray-500 dark:text-zinc-500">
      {description}
    </p>
  </a>
);

<div className="max-w-4xl mx-auto px-6 grid sm:grid-cols-2 gap-4">
  <FeatureCard
    title="Authentication"
    description="Set up OAuth, API keys, and session management."
    href="/guides/authentication"
  />
  <FeatureCard
    title="Webhooks"
    description="Receive real-time notifications for events."
    href="/guides/webhooks"
  />
</div>

Evita usar la propiedad style en elementos HTML. Puede provocar un cambio en el diseño al cargar la página. Usa clases de Tailwind CSS o un archivo CSS personalizado en su lugar.

La vista previa en vivo del editor web no genera CSS para las clases de Tailwind específicas de una página, por lo que los diseños personalizados pueden verse sin estilo mientras los editas. Verifica tus estilos con mint dev, una implementación de vista previa o una implementación de producción. Consulta Las clases de Tailwind no se aplican en la vista previa en vivo del editor.

Agrega CSS personalizado

Para estilos que Tailwind no cubre, agrega un archivo CSS a tu repositorio. Mintlify aplica los archivos CSS a todo el sitio, haciendo que sus nombres de clase estén disponibles en todos los archivos MDX. Usa un archivo CSS personalizado cuando necesites animaciones con keyframes, selectores complejos o estilos que se apliquen a muchas páginas. Para valores puntuales, usa un valor arbitrario de Tailwind, como w-[350px], en su lugar.

Example custom CSS file

.landing-hero {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 4rem 2rem;
}

@media (prefers-color-scheme: dark) {
  .landing-hero {
    background: linear-gradient(135deg, #0c1222 0%, #1a1a2e 100%);
  }
}

Luego haz referencia a la clase en tu MDX:

Example custom CSS usage

<div className="landing-hero">
  <h1>Welcome to the docs</h1>
</div>

Consulta Scripts personalizados para más información sobre CSS personalizado y los selectores CSS disponibles.

Ejemplo completo

Aquí tienes una página de destino completa que combina una sección hero con tarjetas de navegación:

Example landing page

---
title: "Documentation"
description: "Everything you need to build with our platform."
mode: "custom"
---

export const HeroCard = ({ title, description, href, icon }) => (
  <a className="group block p-6 rounded-xl border border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 transition-colors" href={href}>
    <h3 className="font-medium text-gray-900 dark:text-zinc-50">
      {title}
    </h3>
    <p className="mt-2 text-sm text-gray-500 dark:text-zinc-500">
      {description}
    </p>
  </a>
);

<div className="px-4 py-16 lg:py-32 max-w-3xl mx-auto text-center">
  <h1 className="text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
    Documentation
  </h1>
  <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500 max-w-xl mx-auto">
    Everything you need to build, deploy, and scale your application.
  </p>
</div>

<div className="max-w-4xl mx-auto px-6 pb-16 grid sm:grid-cols-2 gap-4">
  <HeroCard
    title="Quickstart"
    description="Get up and running."
    href="/quickstart"
  />
  <HeroCard
    title="API reference"
    description="Explore endpoints, parameters, and examples."
    href="/api-reference"
  />
  <HeroCard
    title="Guides"
    description="Step-by-step tutorials for common tasks."
    href="/guides"
  />
  <HeroCard
    title="SDKs"
    description="Client libraries for every major language."
    href="/sdks"
  />
</div>

Consejos

Prueba en modo claro y oscuro. Previsualiza tu diseño personalizado tanto en modo claro como oscuro para detectar estilos dark: que falten.
Usa las clases max-w-* para limitar el ancho del contenido y mantener el texto legible.
Hazlo responsivo. Usa los prefijos responsivos de Tailwind (sm:, md:, lg:) para que tu diseño funcione en todos los tamaños de pantalla.
Combina modos. Usa el modo custom para la página principal de tu documentación y el modo default para todo lo demás. El modo se configura por página, así que diferentes páginas pueden usar distintos diseños.
Verifica los cambios de diseño. Si los elementos saltan al cargar la página, reemplaza las propiedades style en línea con clases de Tailwind o CSS personalizado.
Aplica estilos directamente a los componentes. Los componentes aceptan una propiedad className, así que puedes ajustar una sola instancia sin un elemento contenedor ni una regla CSS que la anule. Consulta Estiliza componentes con className.

Descripción general

IA

Documentación de la API

Mejores prácticas

Git

Casos de uso

Crear diseños de página personalizados

Elige un modo de página

Crea una página de destino

Configura la página

Crea una sección hero

Agrega tarjetas de navegación

Usa imágenes con soporte para modo oscuro

Usa componentes de React para diseños interactivos

Agrega CSS personalizado

Ejemplo completo

Consejos

​Elige un modo de página

​Crea una página de destino

​Configura la página

​Crea una sección hero

​Agrega tarjetas de navegación

​Usa imágenes con soporte para modo oscuro

​Usa componentes de React para diseños interactivos

​Agrega CSS personalizado

​Ejemplo completo

​Consejos

Elige un modo de página

Crea una página de destino

Configura la página

Crea una sección hero

Agrega tarjetas de navegación

Usa imágenes con soporte para modo oscuro

Usa componentes de React para diseños interactivos

Agrega CSS personalizado

Ejemplo completo

Consejos