Personaliza tu UI con componentes de 21stDev
Curso Gratis de Lovable para Crear Páginas Web sin Programar
Contenido del curso
Beder Danilo Casa Condori
EDGAR LÓPEZ FIERRO
Yaritza Jazmin Sanchez Rosa
Gabriel Obregón
Fredy Pico
Pedro Uzcategui
Yaritza Jazmin Sanchez Rosa
Andres David Martinez Torres
MARIA TERESA PANIAGUA RIVERA
Boris Turcios
Ignacio Andres Ancan Hernandez
Agustin Reinoso
Jose Atilio Marcelo Aranda
Kevin Fiorentino
JHØN AVALØZ
La integración de componentes UI personalizados desde 21st Dev implica buscar y copiar elementos de diseño que se adapten a tu proyecto en Lovable. Primero, exploras el sitio 21st Dev, seleccionas el componente deseado, y luego copias tanto el código del componente como sus estilos. Lo pegas en tu proyecto usando la herramienta de edición de Lovable. Asegúrate de ser específico en tus prompts para mantener la funcionalidad del componente. Esto te ayudará a crear una experiencia de usuario única y atractiva en tu app.
El intento de cambiar el tamaño del componente de casilla de verificación falló porque no se especificó que debía mantener la funcionalidad intacta durante el proceso. En cambio, al ajustar el tamaño del toggle, se incluyó la instrucción para preservar todas las animaciones y funcionalidades, lo que garantizó un resultado exitoso. La claridad en las instrucciones es clave para lograr los cambios deseados en los componentes.
¿Qué pasa si Lovable daña mi componente animado?
Si notas que al pedir una modificación (como reducir el tamaño de un botón) la inteligencia artificial elimina las animaciones o deforma la estructura original, no entres en pánico. Esto ocurre porque la IA a veces simplifica el código para cumplir tu instrucción principal, sacrificando detalles estéticos.
La solución inmediata es utilizar la función de Restaurar o rollback. Al hacer clic en este botón, tu proyecto regresará instantáneamente al estado previo donde el componente funcionaba perfectamente. Una vez restaurado, el truco está en volver a intentar la modificación, pero esta vez aplicando un prompt de seguridad. Debes ser explícito y agregar una regla estricta en tu instrucción, por ejemplo: "Reduce el tamaño a la mitad, pero es obligatorio que mantengas intactas todas las animaciones, transiciones y la lógica de clics". Al blindar tu instrucción, obligas a la herramienta a respetar el código personalizado.
📘🚀 Rapid UI Improvement with 21st Dev and Lovable
🎯 MAIN OBJECTIVE
👉 Rapidly improve a user interface (UI) using ready-made components from 21st Dev and integrating them into Lovable, without losing:
✔ Animations
✔ Functionality
✔ Visual consistency
🧩 WHAT IS 21st DEV?
📦 Community UI component library that allows you to:
👀 Preview designs
📋 Copy only the necessary code
✨ Improve key form elements:
🔑 Key idea:
Choose components aligned with the style guide to maintain a consistent UI.
🔗 PROPER INTEGRATION IN LOVABLE
📌 Essential rules
✔ Copy all the code
↳ Base component + styles
✔ Respect the original code order
✔ Use clear and explicit prompts, indicating:
🎛 PRACTICAL EXAMPLE: ANIMATED TOGGLE
🔄 Toggle with “liquid” animation
After integrating it, verify that it:
⚠️ COMMON MISTAKES
🚫 Avoid the following issues:
❌ Forgetting a tab or part of the code
❌ Pasting code blocks out of order
❌ Using vague or generic instructions
⚠️ Result: visual errors or loss of functionality.
✏️ REFINING ALREADY IMPORTED COMPONENTS
🛠 For later adjustments, use detailed prompts.
✅ Example of a good prompt:
📌 Golden rule:
📝 More detail = better results
☑️ CUSTOM CHECKBOXES
🎨 Example mentioned:
🔧 When modifying them (for example, size), always specify that the following must be preserved: ✔ Design
✔ Animations
✔ Interaction
🔄 UNWANTED CHANGES FROM LOVABLE
🔍 Common changes:
🧭 How to fix it
1️⃣ Restore the previous version
2️⃣ Try again with clearer constraints
3️⃣ Iterate with small, precise prompts
But if I copy code from 21dt.dev and paste it as a prompt in Lovable, does it consume more Lovable credits?
Follow me:
It does.
¿Puedo usar esto para crear interfaces altamente personalizadas?
Absolutamente. Integrar repositorios de código abierto te permite romper con la monotonía de las plantillas predeterminadas y construir un sistema de diseño verdaderamente único. En lugar de conformarte con los botones o formularios estándar que usan miles de aplicaciones, puedes inyectar microinteracciones avanzadas que eleven la calidad percibida de tu producto.
Al dedicar tiempo a seleccionar e implementar elementos visuales con carácter—como interruptores con físicas de fluidos o casillas de verificación con animaciones de éxito—estás construyendo una identidad de marca sólida. Esta atención al detalle en la interfaz de usuario (UI) se traduce directamente en una mejor experiencia de usuario (UX). Los usuarios tienden a recordar y confiar más en aplicaciones que se sienten pulidas, modernas y diferentes al resto del mercado, dándote una ventaja competitiva crucial desde el lanzamiento de tu Producto Mínimo Viable (MVP).
Alguien podria decir que tan buena y funcional es esta integracion en un mundo real de produccion?
Thanks
🎨 INTEGRACIÓN DE COMPONENTES UI PERSONALIZADOS (21st Dev + Lovable) 🧩 OBJETIVO DE LA CLASE Aprender a integrar componentes UI personalizados desde una librería externa (21st Dev) dentro de Lovable para mejorar diseño, animaciones y experiencia de usuario. 📦 ¿QUÉ ES 21st DEV? ✨ Librería de componentes UI modernos 🎞️ Incluye animaciones y efectos visuales 🧱 Componentes reutilizables y personalizables 👀 Permite previsualizar antes de integrar 🔗 INTEGRACIÓN EN LOVABLE 1️⃣ Seleccionar un componente en 21st Dev 2️⃣ Copiar el código completo del componente 3️⃣ Copiar también los estilos asociados 4️⃣ En Lovable, seleccionar el componente existente 5️⃣ Reemplazarlo usando instrucciones claras 6️⃣ Verificar que animaciones y funcionalidad sigan activas ⚠️ ERRORES COMUNES ❌ Copiar solo parte del código ❌ Olvidar los estilos ❌ Reemplazar sin seleccionar correctamente el componente ❌ Dar instrucciones ambiguas ✅ BUENAS PRÁCTICAS ✔️ Copiar todos los bloques necesarios ✔️ Usar prompts claros y específicos ✔️ Probar el resultado después de integrar ✔️ Mantener consistencia visual 🛠️ PERSONALIZACIÓN SEGURA 🎯 Ajustar tamaño sin romper animaciones 🎨 Cambiar colores manteniendo estructura 🧠 Editar siempre con el componente completo seleccionado 🚀 TIP FINAL Explorar librerías UI acelera el desarrollo, mejora el diseño y eleva la calidad visual de tus proyectos sin construir todo desde cero.
21st Dev es muy bueno, vi hartas opciones para inspirarme a diseñar mejor mi web
Hola podrían sincronizar los subtitulos? gracias
A pesar de que los componentes de UI pueden mejorarse continuamente lovable tiene buenas implementaciones, que en primera instancia para un MVP son satisfactorias en la mayoría de los casos, esta plataforma no se duerme y siguen incorporando los ultimos modelos disponibles de gigantes como google.
Es bastante sencillo "importar" componentes de cualquier librería externa. Copiando y pegando el código, dejando que Lovable lo adapte al proyecto existente.
<u>21st Dev:</u> Especificø en cømpønentes
JA CØPY JA
