Crear diseños de página personalizados

Usa modos de página y componentes para crear páginas de destino, páginas de marketing y otros diseños no estándar en tu documentación de Mintlify.

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.

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.

​

Agrega tarjetas de navegación

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.

​

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.

Los valores arbitrarios de Tailwind CSS (por ejemplo, w-[350px]) no son compatibles. Usa un archivo CSS personalizado para valores que las clases utilitarias de Tailwind no cubran.

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.