■  Дизайн-система · Go · открытый код

Дизайн-система, которая приходит с сервера готовой.

71 компонент на Go на базе templ, Tailwind, HTMX и Alpine. Без Node, без бандлера, без запросов к CDN во время работы страницы. Чтобы начать, достаточно go get.

Смотреть компоненты Попробовать white-label
$ go get github.com/vapulab/malphas

Открытый код, лицензия MIT. Открыть на GitHub

Компоненты
71
Зависимости npm
0
Запросы к CDN
0
Контраст
AA

в обеих темах

Что внутри

От простого к сложному

Кнопки, формы и модальные окна, а ещё Data Table, Date Picker, Combobox, Command Palette, Sidebar с панелями изменяемого размера и чат для ИИ-интерфейсов.

Всем управляет сервер

HTML приходит с сервера готовым, а HTMX заменяет только то, что изменилось. Поиск в Data Table работает даже с выключенным JavaScript.

Доступность, проверенная тестами

Клавиатура, фокус и ARIA проверены в настоящем Chrome через chromedp. Модальные окна удерживают фокус внутри себя, блокируют прокрутку и делают фон инертным.

White-label на токенах

Поменяйте бренд, основной цвет и фон — и весь интерфейс подстроится. Эта страница и есть Malphas в своём фирменном цвете, а демо предупредит, если сочетание станет нечитаемым.

Отрисовано только что, на сервере

Ниже нет ни одной картинки. Это Malphas, собранный на Go в ответ на этот запрос.

ПринятВ обработкеОтменёнЧерновик
Синхронизация истории 72%

Палитра команд:CtrlK

Каталог

У каждого компонента есть своя страница с живыми примерами и кодом рядом.

Обратная связь 6

В четыре шага

Malphas — обычный Go-модуль с версиями по git-тегам; от вашего приложения он ни в чём не зависит.

1 · Установите

go get github.com/vapulab/malphas

2 · Подключите Tailwind

// tailwind.config.js: пресет добавляет цвета,
// шрифты и токены темы
const dir = execSync("go list -m -f {{.Dir}}
  github.com/vapulab/malphas")
presets: [require(dir + "/theme/preset.js")]

3 · Раздайте ассеты

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

4 · Отрендерите

@components.Button(
  components.ButtonProps{}) {
  Выставить счёт
}

Полная инструкция — в README

Сделано, чтобы не ломаться

Дизайн-система лежит под каждым экраном, который вы выпускаете. Поэтому каждый компонент проходит одну и ту же проверку, прежде чем попасть к вам.

Проверено в настоящем браузере

Каждое изменение прогоняется в настоящем Chrome: клики, клавиатура и фокус — так, как с ними будут работать ваши пользователи. Если что-то ломается, в релиз это не попадает.

Исправленная ошибка не вернётся

Каждое исправление сопровождается тестом, который его доказывает: верните дефект — тест упадёт. Регрессия останавливается задолго до того, как дойдёт до вас.

Обновления — по вашему графику

Каждый релиз — это тег Go-модуля. Вы фиксируете версию, смотрите, что изменилось, и обновляетесь, когда удобно, без сюрпризов в сборке.

Смотреть компонентыОткрыть на GitHub