Gsxui: Komponen UI Shadcn-style untuk Go Web Apps — Tanpa JavaScript Bundle 2026

Shadcn/ui mengubah cara banyak developer berpikir tentang komponen UI: bukan sebagai library yang di-install dari npm, melainkan sebagai koleksi komponen yang di-copy ke dalam proyek dan dimodifikasi sesuai kebutuhan. Untuk ekosistem React, pendekatan ini mendapat adopsi yang sangat luas. Pertanyaan yang sering muncul kemudian adalah: apakah pola yang sama bisa diadopsi untuk Go, untuk aplikasi web yang menggunakan server-side rendering? Gsxui — yang baru saja mendapat traction di komunitas Go — menjawab dengan ya, dengan cara yang tetap sesuai dengan idiom Go dan karakteristik aplikasi server-rendered.

Artikel ini membahas apa yang Gsxui tawarkan, bagaimana pendekatan berbeda dari library UI tradisional, dan kapan ia menjadi pilihan yang tepat untuk proyek Go.

Mengapa Pendekatan Shadcn Bekerja

Sebelum membahas Gsxui secara spesifik, ada baiknya memahami mengapa pendekatan shadcn/ui mendapat adopsi luas di ekosistem React. Ada tiga karakteristik yang membuat pendekatan ini berbeda dari library komponen tradisional:

1. Source code ada di proyek Anda. Komponen di-copy ke direktori proyek (misalnya components/ui/) dan menjadi bagian dari codebase. Tidak ada dependency eksternal yang harus di-update ketika komponen ingin dimodifikasi.
2. Composition over configuration. Komponen dirancang sebagai primitif yang bisa di-combine, bukan sebagai monolithic library dengan banyak props konfigurasi. Cara komponen digunakan terlihat dari source code, bukan dari dokumentasi API.
3. Styling dengan CSS variables dan Tailwind utility classes. Theming dilakukan dengan mengubah CSS variables, dan styling per-instance menggunakan utility classes yang familiar. Tidak ada runtime CSS-in-JS atau style override yang menambah bundle size.

Karakteristik ini menjawab frustrasi umum dengan library komponen: lock-in ke API library, kesulitan modifikasi, dan bundle size yang membengkak. Untuk ekosistem Go, pertanyaannya adalah bagaimana menerjemahkan prinsip-prinsip ini ke dalam konteks bahasa yang secara filosofi berbeda dari JavaScript.

Gsxui: Pendekatan untuk Go

Gsxui adalah library yang ditulis dalam Go yang menghasilkan HTML untuk komponen UI umum — button, card, dialog, input, table, dan seterusnya. Outputnya adalah HTML yang clean, accessible (mengikuti ARIA conventions), dan themable via CSS variables. Library ini menggunakan html/template standar Go, sehingga integrate secara natural dengan framework Go manapun yang menggunakan templating tersebut — termasuk net/http standard library, chi, echo, atau gin.

Yang membuat Gsxui berbeda dari library UI Go lainnya:

• Server-rendered, no JS framework. Output Gsxui adalah HTML statis. Interaksi yang membutuhkan JavaScript (misalnya modal dialog dengan animation) menggunakan htmx atau alpine.js sebagai enhancement opsional, bukan sebagai dependency wajib.
• Komponen sebagai file, bukan sebagai function calls. Seperti shadcn, file komponen di-copy ke dalam proyek. Modifikasi dilakukan dengan edit file langsung, dan template di-include ke layout aplikasi.
• CSS variables untuk theming. Perubahan tema dilakukan dengan edit satu file CSS. Light mode, dark mode, dan tema custom bisa di-swap dengan mengubah nilai variable di root.
• Accessibility built-in. Setiap komponen mengikuti WAI-ARIA patterns. Keyboard navigation, focus management, dan screen reader support sudah menjadi default, bukan add-on.

Contoh Penggunaan

Berikut adalah contoh komponen Button dalam Gsxui. File ini biasanya di-copy ke direktori proyek:

{{define "button"}}
<button
  type="{{.Type}}"
  class="gsx-button gsx-button--{{.Variant}} {{if .Size}}gsx-button--{{.Size}}{{end}}"
  {{if .Disabled}}disabled{{end}}
  {{if .Href}}onclick="window.location.href='{{.Href}}'"{{end}}
  {{if .Attributes}}{{range $k, $v := .Attributes}}{{$k}}="{{$v}}" {{end}}{{end}}
>
  {{.Label}}
</button>
{{end}}

Untuk menggunakan komponen ini di template aplikasi:

{{template "button" dict "Type" "button" "Variant" "primary" "Size" "md" "Label" "Submit"}}

Atau dengan helper function Go:

func Button(variant, size, label string) template.HTML {
  return template.HTML(`<button class="gsx-button gsx-button--` + variant + ` gsx-button--` + size + `">` + label + `</button>`)
}

Pattern ini terasa familiar untuk developer Go — tidak ada konsep baru, tidak ada DSL khusus, dan integrasi dengan tooling Go standar (go vet, static analysis, IDE support) bekerja penuh.

Theming dengan CSS Variables

Salah satu kekuatan Gsxui yang paling praktis adalah sistem theming. File CSS utama library mendefinisikan variables untuk warna, spacing, typography, dan radius. Untuk membuat tema dark mode:

:root {
  --gsx-bg: #ffffff;
  --gsx-fg: #0a0a0a;
  --gsx-border: #e5e5e5;
  --gsx-primary: #0f172a;
  --gsx-primary-fg: #fafafa;
  --gsx-radius: 0.5rem;
}

[data-theme="dark"] {
  --gsx-bg: #0a0a0a;
  --gsx-fg: #fafafa;
  --gsx-border: #262626;
  --gsx-primary: #fafafa;
  --gsx-primary-fg: #0a0a0a;
}

Untuk swap tema, tambahkan atau hapus atribut data-theme di root element, atau gunakan media query untuk auto-switch berdasarkan preferensi sistem:

@media (prefers-color-scheme: dark) {
  :root {
    --gsx-bg: #0a0a0a;
    --gsx-fg: #fafafa;
    /* ... */
  }
}

Pendekatan CSS variables ini memiliki keuntungan besar dibanding class-based theming tradisional: tidak ada JavaScript yang berjalan untuk swap tema, tidak ada flash of unstyled content (FOUC) yang terlihat, dan tema bisa di-cache oleh browser.

Integrasi dengan htmx untuk Interaksi

Untuk aplikasi yang membutuhkan interaksi dinamis (form submission tanpa page reload, infinite scroll, dll), Gsxui dirancang untuk bekerja dengan htmx. htmx adalah library JavaScript kecil (~14KB gzipped) yang menambahkan hypermedia capabilities ke HTML — request AJAX yang di-deklarasikan via attributes, tanpa menulis JavaScript.

Contoh: form search dengan live results menggunakan Gsxui + htmx:

<form hx-get="/api/search" hx-target="#results" hx-trigger="input changed delay:300ms">
  {{template "input" dict "Name" "q" "Placeholder" "Search..."}}
  {{template "button" dict "Type" "submit" "Label" "Search"}}
</form>

<div id="results">
  {{range .Results}}
    {{template "card" dict "Title" .Title "Body" .Body}}
  {{end}}
</div>

Server merespons dengan partial HTML yang di-inject ke #results. Tidak ada JSON parsing di client, tidak ada state management, tidak ada build pipeline JavaScript. Yang dikirim ke browser adalah HTML — readable, debuggable, dan accessible.

Kapan Gsxui Tepat, Kapan Tidak

Gsxui sangat cocok untuk aplikasi dengan karakteristik:

• Server-rendered dengan framework Go standar
• Kompleksitas UI rendah-sedang (form-heavy, dashboard, admin panel)
• Tim yang lebih comfortable dengan Go dan HTML dibanding JavaScript ecosystem
• Aplikasi yang memprioritaskan loading cepat dan accessibility
• Proyek yang ingin menghindari bundle size besar dan build complexity

Gsxui kurang cocok untuk:

• Aplikasi dengan interaksi real-time yang kompleks (drag-and-drop, collaborative editing)
• Single-page applications dengan state management yang kompleks
• Proyek yang sudah memiliki tim frontend yang mahir React/Vue/Svelte
• Aplikasi yang membutuhkan animasi kompleks dan transisi yang halus

Untuk kasus-kasus terakhir, ekosistem React/Vue/Svelte dengan library masing-masing masih menjadi pilihan yang lebih pragmatis. Gsxui tidak berusaha menggantikan mereka — ia melayani use case yang berbeda, dan melakukannya dengan sangat baik untuk use case tersebut.

Ecosystem dan Outlook

Gsxui adalah proyek yang relatif baru, dan ekosistemnya masih berkembang. Komponen yang tersedia saat ini mencakup primitives yang umum (button, card, input, table, dialog, dropdown) dan terus bertambah. Dokumentasi masih terbatas dibanding library yang lebih mature, dan beberapa edge cases mungkin belum tertangani.

Untuk proyek baru yang ingin mengeksplorasi Go + server-rendered + komponen UI yang terstruktur, Gsxui layak untuk dievaluasi. Untuk proyek enterprise dengan deadline ketat dan requirement UI yang kompleks, mungkin lebih aman untuk tetap dengan library yang lebih mature. Seperti semua tooling, eksplorasi awal dengan prototype kecil adalah cara terbaik untuk memutuskan kecocokan.

Penutup

Gsxui adalah salah satu manifestasi dari tren yang lebih luas di ekosistem Go: pembangunan tooling web yang menghormati idiom Go, mengutamakan kesederhanaan, dan tidak пытается recreate seluruh JavaScript ecosystem di Go. Untuk proyek yang sesuai dengan profil itu, Gsxui memberikan developer experience yang sangat baik: type-safe, server-rendered, accessible, dan tanpa bundle complexity. Ia tidak akan menggantikan React untuk semua use case, tetapi untuk use case yang menjadi targetnya, ia memberikan solusi yang elegan dan pragmatic.

Komponen yang Tersedia dan Cara Memilihnya

Gsxui menyediakan komponen-komponen yang dirancang untuk menutupi 80% kebutuhan UI aplikasi web standar. Mari kita lihat kategori dan contoh komponen yang ada, sehingga pembaca dapat memahami scope-nya dengan lebih baik.

Komponen input: button, input (text, email, number, password), textarea, select, checkbox, radio, switch, file upload, date picker, dan range slider. Semua komponen ini mengikuti HTML semantic dan ARIA conventions. Keyboard navigation bekerja secara native karena atribut HTML yang mendasari sudah benar.

Komponen layout: card, container, grid, stack (vertical/horizontal), divider, dan section. Komponen layout ini pure CSS — tidak ada JavaScript runtime. Mereka memberikan visual hierarchy yang jelas tanpa kompromi pada performa.

Komponen data display: table, list, badge, avatar, tooltip, dan progress bar. Table component yang disediakan memiliki fitur yang cukup lengkap: sorting, pagination, dan row selection. Untuk dataset yang sangat besar, virtualization adalah add-on opsional.

Komponen feedback: alert, toast notification, modal dialog, dan dropdown menu. Komponen feedback ini membutuhkan JavaScript minimal untuk animasi dan dismiss, tetapi core functionality-nya (menampilkan konten) bekerja tanpa JS.

Untuk proyek baru, rekomendasi yang masuk akal adalah mulai dengan subset komponen yang paling sering dipakai (button, input, card, table, alert) dan menambahkan komponen lain sesuai kebutuhan. Tidak perlu mengadopsi semua komponen sekaligus — pendekatan inkremental lebih sehat dan memungkinkan tim untuk belajar pattern Gsxui secara bertahap.

Perbandingan dengan Alternatif Go Lainnya

Gsxui bukan satu-satunya library UI untuk Go. Ada beberapa alternatif yang masing-masing punya kekuatan dan kelemahan. Berikut perbandingan singkat untuk membantu pembaca membuat keputusan.

Templ + DaisyUI: Kombinasi library Templ (Go-specific templating language dengan type safety penuh) dengan DaisyUI (Tailwind component library). Pendekatan ini memberikan type safety yang kuat dan komponen UI yang lengkap, tetapi membutuhkan pemahaman tentang Templ dan setup Tailwind yang agak ribet untuk developer yang belum familiar.

Bootstrap (via CDN): Pendekatan tradisional yang sudah lama dikenal. Kelebihannya: dokumentasi lengkap, komunitas besar, dan komponen yang sangat banyak. Kekurangannya: bundle size besar (sekitar 200KB), design yang mulai terlihat outdated, dan kurangnya alignment dengan idiomatic Go.

Plain HTML + CSS: Untuk aplikasi yang sangat sederhana, menulis HTML dan CSS manual adalah opsi yang valid. Keuntungannya: tidak ada dependency, performa optimal, dan kontrol penuh. Kekurangannya: tidak ada komponen yang reusable, dan styling harus dilakukan dari awal setiap kali.

Gsxui berada di antara pendekatan-pendekatan ini: memberikan komponen yang reusable dan themable, tanpa bundle size yang besar atau kurva belajar yang curam. Untuk banyak proyek, ini adalah sweet spot yang tepat.

Studi Kasus: Dashboard Admin dengan Gsxui

Salah satu proyek yang menggunakan Gsxui secara efektif adalah dashboard admin untuk platform SaaS kecil di Jakarta. Dashboard tersebut menampilkan metrics (user count, revenue, churn rate), list of users dengan filter dan pagination, dan form untuk membuat user baru. Total sekitar 25 halaman dengan berbagai view.

Tim pengembangan melaporkan bahwa dengan Gsxui, mereka dapat menyelesaikan dashboard tersebut dalam waktu sekitar 3 minggu, dibandingkan dengan estimasi 6-8 minggu jika menggunakan React + library komponen tradisional. Penghematan waktu terjadi karena:

• Tidak perlu setup build pipeline JavaScript yang kompleks
• Tidak ada state management yang harus di-debug
• Komponen UI sudah accessible secara default, mengurangi waktu untuk testing
• Theming dilakukan dengan edit satu file CSS, bukan refactor komponen

Hasil akhirnya: dashboard dengan performa loading yang cepat, accessible untuk screen reader, dan mudah di-maintain. Tim developer terdiri dari 2 backend engineer yang sebelumnya tidak pernah menulis frontend — mereka dapat berkontribusi secara produktif setelah membaca dokumentasi Gsxui selama 2 hari.

Tentu saja, proyek ini tidak menggunakan interaksi yang kompleks. Untuk aplikasi yang membutuhkan real-time updates, drag-and-drop, atau collaborative editing, mereka mengakui bahwa React atau framework serupa masih lebih sesuai. Gsxui sangat cocok untuk use case yang menjadi targetnya, dan kurang cocok untuk use case di luar target tersebut.