■ Design system · Go · código abierto
El design system que sale listo del servidor.
71 componentes en Go, con templ, Tailwind, HTMX y Alpine. Sin Node, sin bundler, nada que venga de un CDN mientras la página se ejecuta. Se instala con go get y listo.
$ go get github.com/vapulab/malphasCódigo abierto, licencia MIT. Ver en GitHub
- Componentes
- 71
- Dependencias npm
- 0
- Peticiones a CDN
- 0
- Contraste
- AA
en ambos temas
Qué hay dentro
De lo básico a lo complejo
Botones, formularios y modales, pero también Data Table, Date Picker, Combobox, Command Palette, Sidebar con paneles redimensionables y chat para interfaces de IA.
Manda el servidor
El HTML sale listo del servidor y HTMX reemplaza solo las partes que cambian. La búsqueda del Data Table funciona incluso con JavaScript desactivado.
Accesibilidad probada
Teclado, foco y ARIA probados en un Chrome de verdad, con chromedp. Los modales atrapan el foco, bloquean el scroll y vuelven inerte el fondo.
White-label con tokens
Cambia la marca, el color primario y el fondo, y toda la interfaz se ajusta. Esta página es Malphas con su propio color, y la demo avisa cuando una combinación se vuelve ilegible.
Renderizado ahora, por el servidor
Nada de lo que sigue es una imagen. Es Malphas, construido en Go en esta petición.
Abre la paleta conCtrlK
El catálogo
Cada componente tiene una página con ejemplos en vivo y el código al lado.
Visualización de datos 21
Entrada de datos 18
Layout y utilidades 8
En cuatro pasos
Malphas es un módulo Go, versionado por tags, que no depende de nada de la app que lo usa.
1 · Instala
go get github.com/vapulab/malphas
2 · Configura Tailwind
// tailwind.config.js: el preset trae los colores,
// las fuentes y los tokens del tema
const dir = execSync("go list -m -f {{.Dir}}
github.com/vapulab/malphas")
presets: [require(dir + "/theme/preset.js")]3 · Sirve los assets
mux.Handle("/malphas-assets/",
http.StripPrefix("/malphas-assets",
http.FileServer(http.FS(malphas.Assets()))))4 · Renderiza
@components.Button(
components.ButtonProps{}) {
Emitir factura
}Hecho para no romperse
Un design system está debajo de cada pantalla que entregas. Por eso cada componente pasa el mismo filtro antes de llegar a las tuyas.
Probado en un navegador real
Cada cambio se ejecuta en un Chrome real: clics, teclado y foco, tal como lo usarán tus usuarios. Si algo se rompe, no llega a una versión.
Un error corregido no vuelve
Cada corrección viene con un test que la demuestra: si el defecto vuelve, el test falla. La regresión se detiene mucho antes de llegar a ti.
Actualiza cuando quieras
Cada versión es una tag del módulo Go. Fijas la versión, ves qué cambió y actualizas cuando te convenga, sin sorpresas en tu build.