SaaS Starter
Docs
Componentes

Componentes

Usa componentes de React en Markdown utilizando MDX.

Los siguientes componentes están disponibles de forma predeterminada para su uso en Markdown.

Si deseas construir y agregar tus propios componentes personalizados, consulta la sección Componentes Personalizados a continuación.

Componentes Integrados

1. Aviso

<Callout type="default | warning | danger | note | info | success">
  Este es un callout predeterminado. Puedes incrustar **Markdown** dentro de un `callout`.
</Callout>

Este es un aviso predeterminado. Puedes incrustar Markdown dentro de un callout.

This is a warning callout. It uses the props type="warning".

Este es un aviso de peligro. Utiliza las props type="danger".

Este es un aviso de nota. Utiliza las props type="note".

Este es un aviso de información. Utiliza las props type="info".

Este es un aviso de éxito. Utiliza las props type="success".

2. Card

<Card href="#">
 
#### Heading
 
Puedes usar **markdown** dentro de las tarjetas.
 
</Card>

Encabezado

Puedes usar markdown dentro de las tarjetas.

Ver

También puedes usar HTML para incrustar tarjetas en una cuadrícula.

<div className="grid grid-cols-2 gap-4">
  <Card href="#">
    #### Card One 
    You can use **markdown** inside cards.
  </Card>
 
  <Card href="#">
    #### Card Two 
    You can also use `inline code` and code blocks.
  </Card>
</div>

Card One

You can use markdown inside cards.

Ver

Card Two

You can also use inline code and code blocks.

Ver

Componentes Personalizados

Puedes agregar tus propios componentes personalizados utilizando las props components de useMDXComponent.

components/mdx.tsx
import { Callout } from "@/components/callout"
import { CustomComponent } from "@/components/custom"
 
const components = {
  Callout,
  CustomComponent,
}
 
export function Mdx({ code }) {
  const Component = useMDXComponent(code)
 
  return (
    <div className="mdx">
      <Component components={components} />
    </div>
  )
}

Una vez que hayas agregado tu componente personalizado, puedes usarlo en MDX de la siguiente manera:

<CustomComponent propName="value" />

Elementos HTML

Puedes sobrescribir elementos HTML utilizando la misma técnica mencionada anteriormente.

const components = {
  Callout,
  CustomComponent,
  hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" />,
}

Esto sobrescribirá la etiqueta <hr /> o --- en Markdown con la salida HTML anterior.

Estilización

Las clases de Tailwind CSS se pueden usar dentro de MDX para estilizar.

<p className="text-red-600">This text will be red.</p>

Asegúrate de haber configurado la ruta a tu contenido en tu archivo tailwind.config.js:

BlogArchivos de configuración