Componentes | Boltdocs

Boltdocs proporciona tres categorías de componentes:

Componentes MDX — Disponibles dentro de los archivos de contenido .mdx.
Primitivas de Diseño — Componentes estructurales para componer diseños personalizados de páginas de documentación.
Primitivas de UI — Controles de interfaz modulares y totalmente accesibles.

Componentes MDX

Estos componentes se registran automáticamente de forma global y están disponibles en cada archivo .mdx:

Componente	Descripción
`<Callout>`	Cajas de alerta con variantes: note, info, tip, warning, danger.
`<Card>` / `<Cards>`	Cuadrícula de tarjetas clickeables para navegación de tipo dashboard.
`<Field>`	Filas descriptivas de propiedades API en línea.
`<Image>`	Imágenes adaptables al tema, con diseño responsivo y leyendas.
`<Mermaid>`	Bloque de renderizado de diagramas (requiere el plugin mermaid).
`<Timeline>`	Línea de tiempo vertical con entradas fechadas para changelogs y notas de publicación.

Primitivas de Diseño

Componentes estructurales exportados desde 'boltdocs/primitives' utilizados para construir diseños personalizados de documentación:

Componente	Descripción
`DocsLayout`	Contenedor principal del shell para la cuadrícula de la página de docs.
`Navbar`	Barra de navegación superior con pestañas y controles.
`Sidebar`	Lista de navegación del directorio lateral izquierdo.
`SearchDialog`	Modal de búsqueda superponible accesible.
`OnThisPage`	Rastreador de tabla de contenidos en la columna derecha.
`Breadcrumbs`	Barra de navegación de ruta en línea.
`PageNav`	Enlaces de navegación de páginas para páginas adyacentes.
`ErrorBoundary`	Límite de errores interactivo de React en tiempo de ejecución.

Primitivas de UI

Componentes de interfaz de usuario accesibles y genéricos exportados desde 'boltdocs/primitives':

Componente	Descripción
`Button`	Disparador de presión accesible envuelto en React Aria.
`ButtonGroup`	Contenedor de diseño para agrupar botones adyacentes.
`Tabs`	Selector de paneles con pestañas componibles.
`Popover`	Diálogo superponible contextual flotante.
`Tooltip`	Etiqueta emergente auxiliar de hover/foco.
`Link`	Etiqueta de anclaje con enrutamiento SPA localizado.
`Heading`	Renderiza encabezados HTML con enlaces de anclaje automáticos.
`Menu`	Menús de acciones desplegables y de selección anidados.
`Skeleton`	Marcador de posición de estado de carga con pulso.

Inicio Rápido

Uso de Componentes MDX

<Callout variant="tip" title="Consejo Pro">
  ¡Usa Cards para enlazar páginas relacionadas!
</Callout>

<Cards>
  <Card title="Instalación" href="/docs/guides/getting-started/installation">
    Comienza en 2 minutos
  </Card>
</Cards>

Uso de Primitivas

import { Navbar, Sidebar, OnThisPage } from 'boltdocs/primitives'

export function MyLayout({ children, headings }) {
  return (
    <div>
      <Navbar />
      <div className="flex">
        <Sidebar />
        <main>{children}</main>
        <OnThisPage headings={headings} />
      </div>
    </div>
  )
}

Una muestra de `<Timeline>`

Changelogs, actualizaciones de estado, notas de publicación — cualquier lista cronológica dentro de MDX:

<Timeline>
  <Timeline.Item date="2026-07-20" title="Plugin v3.2 API" badge="Major" icon={<Sparkles />}>
    Nuevos hooks para caches, diagnostics, paths, virtual modules, middleware, server y HMR.
  </Timeline.Item>
  <Timeline.Item date="2026-06-01" title="Soporte de i18n" badge={{ text: 'Minor', variant: 'success' }}>
    Convención de internacionalización por filesystem y rutas conscientes de versión.
  </Timeline.Item>
  <Timeline.Item date="2026-05-15" title="Eliminado sistema legacy de slots" badge={{ text: 'Breaking', variant: 'danger' }}>
    Se eliminó el sistema de slots del lado del plugin — consulta la guía de migración.
  </Timeline.Item>
</Timeline>

La referencia completa (props, paleta de variantes, accesibilidad, patrones comunes) está en Timeline.

Secciones Relacionadas

Componentes MDX — Referencias de componentes Callout, Card, Field, Image y Mermaid.
Primitivas de Diseño — Componentes estructurales principales como Navbar, Sidebar y DocsLayout.
Primitivas de UI — Primitivas accesibles genéricas como Button, Tabs, Menu y Popover.
Diseños Personalizados — Construye tu propio diseño de documentación desde cero.

Last updated on July 27, 2026

Was this page helpful?