■  Design system · Go · código aberto

O design system que sai pronto do servidor.

71 componentes em Go, com templ, Tailwind, HTMX e Alpine. Sem Node, sem bundler, nada vindo de CDN quando a página roda. Quem quer usar instala com go get e pronto.

Ver os componentes Testar o white-label
$ go get github.com/vapulab/malphas

Código aberto, licença MIT. Ver no GitHub

Componentes
71
Dependências npm
0
Requisições a CDN
0
Contraste
AA

nos dois temas

O que tem dentro

Do básico ao complexo

Botões, formulários e modais, e também Data Table, Date Picker, Combobox, Command Palette, Sidebar com painéis redimensionáveis e chat para interfaces de IA.

O servidor manda

O HTML sai pronto do servidor e o HTMX troca só os pedaços que mudam. A busca do Data Table funciona até com o JavaScript desligado.

Acessibilidade testada

Teclado, foco e ARIA testados num Chrome de verdade, via chromedp. Os modais prendem foco, travam a rolagem e tornam o fundo inerte.

White-label por tokens

Troque a marca, a cor primária e o fundo, e a interface inteira se ajusta. Esta página é o Malphas com a cor dele, e a demo avisa quando uma combinação fica ilegível.

Renderizado agora, pelo servidor

Nada abaixo é imagem. É o Malphas, montado em Go nesta requisição.

AutorizadaEm processamentoCanceladaRascunho
Sincronizando histórico 72%

Abra a paleta comCtrlK

O catálogo

Cada componente tem uma página com exemplos ao vivo e o código ao lado.

Em quatro passos

O Malphas é um módulo Go, versionado por tag, que não depende de nada do app que o usa.

1 · Instale

go get github.com/vapulab/malphas

2 · Aponte o Tailwind

// tailwind.config.js: o preset traz as cores,
// as fontes e os tokens do tema
const dir = execSync("go list -m -f {{.Dir}}
  github.com/vapulab/malphas")
presets: [require(dir + "/theme/preset.js")]

3 · Sirva os assets

mux.Handle("/malphas-assets/",
  http.StripPrefix("/malphas-assets",
    http.FileServer(http.FS(malphas.Assets()))))

4 · Renderize

@components.Button(
  components.ButtonProps{}) {
  Emitir nota
}

O passo a passo completo no README

Feito para não quebrar

Um design system fica por baixo de todas as telas que você entrega. Por isso cada componente passa pelo mesmo crivo antes de chegar às suas.

Testado num navegador de verdade

Toda mudança roda num Chrome real: clique, teclado e foco, do jeito que o seu usuário vai usar. Se algo quebra, não vira versão.

Bug corrigido não volta

Cada correção vem com um teste que prova o conserto: com o defeito de volta, ele falha. A regressão é barrada muito antes de chegar a você.

Atualize quando quiser

Cada versão é uma tag do módulo Go. Você fixa a versão, vê o que mudou e atualiza na hora que fizer sentido, sem surpresa no seu build.

Ver os componentesVer no GitHub