Editor en Vivo
Personaliza componentes en tiempo real y obtén el código generado automáticamente
Editor en Vivo
Personaliza componentes, guárdalos y exporta CSS/JS
Personalizar Botón
<button className="bg-blue-500 text-white font-medium px-6 py-2.5 rounded-md text-base hover:opacity-90 transition-colors">
Botón Ejemplo
</button>Paleta de Colores
Colores oficiales de la identidad visual de DamyxIA
Primario
#3B82F6
bg-blue-500
Botones, enlaces, acentos
Secundario
#1E3A8A
bg-blue-900
Headers, sidebars
Fondo Principal
#0F172A
bg-slate-900
Fondo de la app
Fondo Secundario
#1E293B
bg-slate-800
Tarjetas, paneles
Texto Principal
#FFFFFF
text-white
Títulos, contenido
Texto Secundario
#CBD5E1
text-slate-300
Subtítulos
Borde
#334155
border-slate-700
Bordes sutiles
Colores de Estado
Éxito
#22C55E
Advertencia
#EAB308
Error
#EF4444
Info
#38BDF8
Tipografía
Escala tipográfica con Inter como fuente principal
Título Principal H1
Título de Sección H2
Subtítulo H3
Título de Card H4
Texto de cuerpo principal. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Texto secundario o descripción. Usado para contenido menos importante.
Texto pequeño para labels, captions y metadata.
Texto muy pequeño para notas al pie y timestamps.
Botones
Variantes de botones para diferentes acciones
Botones Principales
// Primario
<button className="bg-blue-500 text-white font-medium px-6 py-2.5 rounded-md hover:bg-blue-400 transition-colors">
Acción Principal
</button>
// Secundario
<button className="bg-slate-800 text-white font-medium px-6 py-2.5 rounded-md border border-blue-500 hover:bg-slate-700 transition-colors">
Acción Secundaria
</button>Botones de Estado
Botones con Iconos
Botones de Tamaño
Botones Ghost e Icon-only
Botones Deshabilitados
Tarjetas (Cards)
Contenedores para agrupar información relacionada
Card Básico
Descripción o contenido secundario del card. Usado para mostrar información agrupada.
Card Elevado
Card con sombra para crear jerarquía visual y destacar contenido importante.
Card Interactivo
Card clickeable con hover state. Usado para navegación o selección.
Card con Header
Card con área de imagen o header decorativo.
Card con Icono
Card que destaca una característica o funcionalidad.
Card Destacado
Card con gradiente para contenido premium o llamadas a la acción.
// Card Básico
<div className="bg-slate-800 border border-slate-700 rounded-lg p-6">
<h3 className="text-white font-semibold text-lg mb-2">Título</h3>
<p className="text-slate-300">Contenido aquí.</p>
</div>
// Card Interactivo
<div className="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-blue-500 transition-colors cursor-pointer">
...
</div>Inputs y Formularios
Campos de entrada para formularios
Inputs de Texto
Este campo es requerido
Select y Textarea
Input con Icono
Checkboxes y Radios
// Input con label
<label className="block text-white font-medium mb-2">Campo</label>
<input
className="w-full bg-slate-900 text-white placeholder-slate-400 border border-blue-500 rounded-md px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:outline-none"
placeholder="Escribe aquí..."
/>
// Select
<select className="w-full bg-slate-900 text-white border border-blue-500 rounded-md px-4 py-2.5">
<option value="">Seleccionar...</option>
</select>Tablas
Tablas de datos con filas alternadas para mejor legibilidad
| ID | Nombre | Estado | Acciones | |
|---|---|---|---|---|
| 1 | Juan Pérez | juan@email.com | Activo | |
| 2 | María García | maria@email.com | Pendiente | |
| 3 | Carlos López | carlos@email.com | Activo | |
| 4 | Ana Martínez | ana@email.com | Inactivo | |
| 5 | Pedro Sánchez | pedro@email.com | Activo |
<div className="overflow-hidden rounded-lg border border-slate-700">
<table className="w-full">
<thead className="bg-blue-900">
<tr>
<th className="text-white font-semibold px-4 py-3 text-left">Columna</th>
</tr>
</thead>
<tbody>
{data.map((row, i) => (
<tr className={`border-b border-slate-700 ${i % 2 === 0 ? 'bg-slate-800' : 'bg-slate-900'}`}>
<td className="text-white px-4 py-3">{row.value}</td>
</tr>
))}
</tbody>
</table>
</div>Alertas y Notificaciones
Mensajes de feedback para el usuario
Operación exitosa
Los cambios se han guardado correctamente.
Ha ocurrido un error
No se pudo completar la solicitud. Intenta de nuevo.
Advertencia
Esta acción no se puede deshacer.
Información
Puedes cambiar esta configuración más tarde.
// Alert de éxito
<div className="bg-green-500/20 border border-green-500 rounded-md px-4 py-3">
<p className="text-green-400 font-medium">Operación exitosa</p>
</div>
// Alert de error
<div className="bg-red-500/20 border border-red-500 rounded-md px-4 py-3">
<p className="text-red-400 font-medium">Ha ocurrido un error</p>
</div>Espaciado
Escala de espaciado consistente basada en múltiplos de 4px
Sombras
Sombras sutiles para crear profundidad y jerarquía
Sin sombra
shadow-none
Sombra SM
shadow-sm
Sombra MD
shadow-md
Sombra LG
shadow-lg
Sombra XL
shadow-xl
Sombra 2XL
shadow-2xl
Sombra Color
shadow-blue-500/20
Sombra Inner
shadow-inner
Badges y Tags
Etiquetas para categorías, estados y metadatos