Ejemplo Completo de MDX: Componentes Interactivos en el Blog
Descubre cómo MDX transforma nuestro blog con componentes interactivos, estadísticas dinámicas y elementos personalizados que mejoran la experiencia de lectura.
¡Bienvenido al tutorial completo de componentes MDX! En este post aprenderás a usar cada uno de los 16 componentes disponibles con ejemplos prácticos y casos de uso reales.
Este post es completamente funcional. Puedes interactuar con todos los componentes mientras aprendes cómo funcionan. ¡No tengas miedo de hacer clic, tocar y explorar!
¿Qué hace especial a MDX?
MDX revoluciona la creación de contenido al combinar Markdown con componentes interactivos:
- ✨ Experiencias inmersivas dentro del contexto del artículo
- 📊 Visualizaciones dinámicas que se adaptan a tu contenido
- 🎨 Componentes reutilizables con props personalizables
- 🚀 Rendimiento optimizado con hidratación selectiva
📚 Tutorial Completo: 16 Componentes MDX
Bienvenido al tutorial definitivo donde aprenderás a usar cada uno de nuestros 16 componentes MDX. Cada sección incluye ejemplos funcionales y explicaciones detalladas.
🏗️ PARTE I: Componentes de Estructura
1. InfoBox - Destacar Información Clave
Props: type (info, warning, success, tip), title
Usa InfoBox para destacar información crítica que el usuario no debe pasar por alto. Ideal para warnings, tips o datos importantes.
Ten cuidado al usar muchos InfoBox seguidos, pueden saturar visualmente al lector.
Este componente es excelente para confirmaciones y mensajes de éxito.
2. ContentTabs - Organizar Contenido Complejo
Props: tabs (array con label y content)
🌱 Para Empezar
Si eres nuevo en abrazos virtuales, comienza con algo simple. Un abrazo básico puede transmitir tanto amor como uno elaborado.
- Elige un fondo neutral
- Escribe un mensaje corto y sincero
- Comparte con alguien cercano
3. Accordion - FAQs y Contenido Colapsable
Props: items (array con title y content), multiple (boolean)
4. Timeline - Procesos y Evolución Temporal
Props: events (array), variant (“vertical” | “horizontal”)
💡 Concepto Inicial
Nace la idea de crear conexiones emocionales digitales auténticas, más allá de simples mensajes de texto.
🧠 Investigación Científica
Estudiamos neurociencia y psicología positiva para entender cómo replicar digitalmente los beneficios de los abrazos físicos.
🎨 Diseño y Prototipo
Creamos las primeras versiones con feedback de psicólogos, terapeutas y usuarios beta.
🚀 Lanzamiento Público
Hugs.Company se lanza oficialmente, llegando a miles de usuarios en su primera semana.
5. TwoColumn - Comparaciones y Layouts Flexibles
Props: split (“50-50”, “60-40”, etc.), gap, reverseOnMobile
💝 Beneficios Emocionales
- Reduce la ansiedad - La oxitocina liberada contrarresta el cortisol
- Mejora el estado de ánimo - Efectos positivos duran hasta 6 horas
- Fortalece vínculos - Crea conexiones más profundas a distancia
- Aumenta la empatía - Las neuronas espejo se activan como con contacto real
🧬 Respaldo Científico
- Neurociencia - Activación de áreas cerebrales del afecto
- Psicología Positiva - Incremento medible de bienestar
- Terapia Digital - Herramienta validada por profesionales
- Investigación Continua - Estudios en curso con universidades
📊 PARTE II: Visualización de Datos
6. ProgressBar - Mostrar Progreso y Estadísticas
Props: value (0-100), label, color, showPercentage, animated
Tu Progreso en Bienestar Emocional Esta Semana:
7. StepIndicator - Guías Paso a Paso
Props: steps (array), variant (“vertical” | “horizontal”), showNumbers
Elige tu Estilo
Selecciona tema, colores y ambiente
Personaliza el Mensaje
Escribe desde el corazón
Añade Multimedia
Música e imágenes que transmitan tu sentir
Comparte con Amor
Envía tu abrazo al mundo
8. ComparisonTable - Comparar Opciones y Planes
Props: columns (array), title
🤗 Planes de Abrazos Virtuales
| Características | Gratuito $0/mes | Premium $4.99/mes | Familia $9.99/mes |
|---|---|---|---|
| 3 abrazos por día | ✓ | ✗ | ✗ |
| Temas básicos | ✓ | ✗ | ✗ |
| Música preseleccionada | ✓ | ✗ | ✗ |
| Compartir básico | ✓ | ✗ | ✗ |
| Abrazos ilimitados | ✗ | ✓ | ✗ |
| Todos los temas | ✗ | ✓ | ✗ |
| Música personalizada | ✗ | ✓ | ✗ |
| Analytics avanzados | ✗ | ✓ | ✗ |
| Programación de envíos | ✗ | ✓ | ✗ |
| Templates exclusivos | ✗ | ✓ | ✗ |
| Hasta 6 cuentas | ✗ | ✗ | ✓ |
| Características Premium | ✗ | ✗ | ✓ |
| Abrazos grupales | ✗ | ✗ | ✓ |
| Historial familiar | ✗ | ✗ | ✓ |
| Soporte prioritario | ✗ | ✗ | ✓ |
🎮 PARTE III: Componentes Interactivos
9. InteractiveHugDemo - Experiencia Inmersiva
Prueba nuestro demo interactivo:
🤗 Experimenta el poder de un abrazo virtual
Haz clic en el botón para experimentar la liberación de oxitocina
10. SurveyPoll - Investigación y Engagement
Props: question, description, options, allowMultiple
¿Qué tipo de abrazo virtual prefieres enviar?
Ayúdanos a entender mejor las preferencias de nuestra comunidad
11. ImageGallery - Galerías Inmersivas
Props: images (array), caption, layout
{image.caption}
)}{image.caption}
)}{image.caption}
)}{image.caption}
)}12. VideoEmbed - Contenido Multimedia
Props: src, title, platform (“youtube” | “vimeo” | “direct”)
13. Newsletter - Captura de Suscriptores
Props: title, description, placeholder, buttonText
📢 PARTE IV: Engagement Social
14. AuthorBio - Información del Autor
Props: name, avatar, bio, website, twitter, linkedin, role
Dr. María Elena Rodríguez
Psicóloga Especialista en Bienestar Digital
Doctora en Psicología con 15+ años estudiando el impacto de la tecnología en las relaciones humanas. Coautora de 'Conexiones Digitales Auténticas' y consultora en bienestar emocional para startups tecnológicas.
15. SocialShare - Compartir Personalizado
Props: title, description, url, platforms
16. CommentPrompt - Fomentar Conversación
Props: title, description, email, social, discussionUrl
📊 Datos de Impacto - ScienceStats
de contacto humano cambian tu química cerebral por horas
de las personas reportan mejor ánimo después de un abrazo
más oxitocina se libera con contacto humano genuino
✨ Otras Funcionalidades
QuoteHighlight - Citas Destacadas
"MDX ha revolucionado completamente cómo creamos contenido. La capacidad de combinar texto con componentes interactivos nos permite contar historias que realmente conectan con nuestros lectores.
IconList - Listas Visuales
🎯 Call to Action Final
¿Listo para crear contenido increíble?
Has visto todos nuestros componentes en acción. Ahora es tu turno de crear experiencias únicas que conecten con tu audiencia.
Comenzar a Crear💡 Consejos para Usar Estos Componentes
- No abuses: Usa 3-5 componentes diferentes por post máximo
- Piensa en la narrativa: Cada componente debe servir a la historia
- Considera el rendimiento: Usa
client:loadsolo cuando sea necesario - Testea en móvil: Todos nuestros componentes son responsive
- Mide el impacto: Observa cómo responden tus lectores
🤗 Este tutorial completo demuestra cada uno de nuestros 16 componentes MDX en acción. Cada uno ha sido diseñado para ser intuitivo, accesible y altamente funcional. ¡Ahora tienes todas las herramientas para crear contenido verdaderamente interactivo!
También te puede interesar
Por qué solo vemos la belleza cuando se acaba
Descubre por qué tu cerebro no sabe valorar lo que tienes hasta perderlo y aprende a vivir cada momento como si fuera extraordinario
Cómo un gesto simple puede cambiarte el día completo
Descubre por qué un simple mensaje, una sonrisa o un abrazo pueden cambiar completamente tu día. La ciencia detrás de los gestos que realmente importan ✨
💬 ¿Qué opinas de estos componentes?
¿Has probado alguno de estos componentes? ¿Cuál te parece más útil para tu contenido? ¡Queremos conocer tu experiencia!
Tu feedback nos ayuda a crear mejor contenido sobre bienestar y conexión humana.