🎊 Nueva Versión 3.0 🎉
Spartan
Sistema de componentes unificado para aplicaciones web de PlaceToPay.
Construido con Vue 3 y TailwindCSS, con soporte nativo de internacionalización.
Hecho con Vue y TailwindCss
Los componentes se integran nativamente en proyectos que ya usan estas tecnologías.
Diseñado en Figma
Hermosos diseños y prototipos creados en Figma y luego implementados como componentes reutilizables.
54 componentes principales y 10 variantes Block
Desde botones e inputs hasta modales y tablas, Spartan ofrece componentes reales, reutilizables y personalizables para tus flujos de producto.
Listo
Producción
Vue 3
Flujo sincronizado
Estados, formularios y acciones usan componentes reales de Spartan.
Usa SCheckbox con descripción y estado controlado.
Autorizaciones activasSSwitch refleja cambios de estado al instante.
Asistente Inteligente
Pregunta cualquier cosa sobre Spartan y obtén respuestas instantáneas con nuestro asistente impulsado por IA.
Próximamente💸Un asistente impulsado por IA para ayudarte con la documentación de Spartan.
Modo Color integrado
Hecho para alternar entre modo claro y oscuro.
Soporte de Internacionalización
Soporte i18n integrado con enrutamiento automático y gestión de contenido. Crea documentación multilingüe sin esfuerzo.
Integración de Iconos
Diseñado para trabajar con Iconsax Vue y Flagicons Vue
Escrito en Typescript
Todos los componentes y utilidades están desarrollados con Typescript para una mejor experiencia de desarrollo y seguridad de tipos.
Plantillas y Ejemplos de uso
Aplicaciones reales brillan con el estilo Spartan. Explora nuestras plantillas, ejemplos para comenzar rápidamente.
Tema personalizable con CSS
Personaliza la paleta de colores de toda la librería desde la hoja de estilos principal de tu proyecto, sin tocar el código de los componentes.
main.css
@theme {
--color-spartan-primary-50: rgb(228 242 253);
--color-spartan-primary-100: rgb(187 222 251);
--color-spartan-primary-200: rgb(144 202 249);
--color-spartan-primary-300: rgb(100 181 246);
--color-spartan-primary-400: rgb(66 165 245);
--color-spartan-primary-500: rgb(33 150 243);
--color-spartan-primary-600: rgb(30 132 229);
--color-spartan-primary-700: rgb(25 103 196);
--color-spartan-primary-800: rgb(21 78 148);
--color-spartan-primary-900: rgb(13 42 84);
}
Listo para comenzar?
Explora todas las características de Spartan.