■  Design system · Go · open source

The design system that renders on the server.

71 components in Go, built with templ, Tailwind, HTMX and Alpine. No Node, no bundler, nothing pulled from a CDN while the page runs. Install it with go get; four steps below.

Browse the components Try the white-label demo
$ go get github.com/vapulab/malphas

Open source, MIT license. View on GitHub

Components
71
npm dependencies
0
CDN requests
0
Contrast
AA

in both themes

What's inside

From basic to complex

Buttons, forms and modals, but also Data Table, Date Picker, Combobox, Command Palette, a Sidebar with resizable panels and chat for AI interfaces.

The server is in charge

HTML leaves the server finished, and HTMX swaps only the pieces that change. The Data Table search works even with JavaScript turned off.

Tested accessibility

Keyboard, focus and ARIA tested in real Chrome, through chromedp. Modals trap focus, lock scrolling and make the background inert.

White-label through tokens

Change the brand, the primary color and the background, and the whole interface adjusts. This page is Malphas in its own colors, and the demo warns you when a combination becomes unreadable.

Rendered just now, by the server

Nothing below is an image. It's Malphas, assembled in Go for this request.

AuthorizedProcessingCanceledDraft
Syncing history 72%

Open the palette withCtrlK

The catalog

Every component has its own page, with live examples and the code right next to them.

In four steps

Malphas is a Go module, versioned with tags, and it depends on nothing in the app that imports it.

1 · Install

go get github.com/vapulab/malphas

2 · Point Tailwind at it

// tailwind.config.js: the preset brings the colors,
// the fonts and the theme tokens
const dir = execSync("go list -m -f {{.Dir}}
  github.com/vapulab/malphas")
presets: [require(dir + "/theme/preset.js")]

3 · Serve the assets

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

4 · Render

@components.Button(
  components.ButtonProps{}) {
  Issue invoice
}

The full walkthrough in the README

Built not to break

A design system sits under every screen you ship. So each component clears the same bar before it reaches yours.

Tested in a real browser

Every change runs in a real Chrome: clicks, keyboard and focus, the way your users will use it. If something breaks, it never reaches a release.

Fixed bugs stay fixed

Every fix ships with a test that proves it: put the bug back and the test fails. A regression gets stopped long before it reaches you.

Update on your schedule

Each release is a Go module tag. You pin the version, read what changed and upgrade when it suits you, with no surprises in your build.

Browse the componentsView on GitHub