UI Component Library untuk Tech Stack Go: templ, shadcn-temp...

Salah satu keluhan paling umum soal Go untuk web development: "backend-nya cepat, tapi begitu sampai ke UI, developer terpaksa lompat ke React atau Vue." Anggapan ini sebenarnya sudah ketinggalan zaman. Ekosistem Go sekarang punya jajaran component library UI yang cukup matang untuk membangun aplikasi web lengkap — tanpa perlu keluar dari Go sama sekali.

Panduan ini merangkum pilihan UI component library untuk tech stack Go yang relevan hari ini, plus kapan masing-masing cocok dipakai.

Fondasinya Dulu: Kenapa Perlu templ?

Sebelum bicara component library, penting paham satu hal: standard library Go (html/template) memang bisa dipakai untuk render HTML, tapi ia berbasis string dan baru ketahuan salah saat runtime — bukan saat compile.

Templ memecahkan masalah ini. Ia adalah templating engine yang mengompilasi file .templ menjadi kode Go asli, sehingga Anda dapat:

• Type safety penuh — kesalahan struktur HTML atau parameter komponen ketahuan saat compile, bukan setelah deploy.
• Auto-completion editor yang berfungsi normal, karena hasil akhirnya memang kode Go.
• Komponen bisa disusun dan digunakan ulang layaknya fungsi biasa.

templ Card(title string, children ...templ.Component) {
    <div class="card">
        <h2>{ title }</h2>
        for _, c := range children {
            @c
        }
    </div>
}

Hampir semua UI component library Go modern yang dibahas di bawah ini dibangun di atas templ — jadi mempelajarinya adalah investasi pertama yang paling masuk akal.

Pola GOTH Stack: Go + templ + HTMX + Tailwind

Kombinasi yang paling banyak dipakai komunitas Go untuk membangun UI interaktif tanpa framework JavaScript berat disebut GOTH stack: Go, Oops (istilah bercanda untuk lem di antaranya), Templ, dan HTMX — meski dalam praktiknya, susunan intinya adalah Go + templ + HTMX + Tailwind CSS.

Cara kerjanya:

1. Backend Go merender fragmen HTML lewat komponen templ.
2. HTMX mengganti bagian halaman secara dinamis lewat atribut HTML (hx-get, hx-post, hx-swap) tanpa menulis JavaScript manual.
3. Alpine.js dipakai untuk interaktivitas ringan di sisi klien (toggle, dropdown) yang tidak butuh round-trip ke server.
4. Tailwind CSS menangani styling secara utility-first.

Hasilnya: aplikasi terasa reaktif seperti SPA, tapi seluruh logic tetap di server — tanpa build step JavaScript yang rumit, tanpa node_modules, dan seluruh aplikasi bisa dikompilasi jadi satu binary.

Kalau JavaScript dimatikan di browser, HTMX otomatis mundur ke perilaku form/link HTML biasa (full page reload). Aplikasi tetap berfungsi — hanya kehilangan interaktivitas halus, bukan rusak total.

Pilihan Component Library

templUI / shadcn-templ

Ini adalah opsi paling populer saat ini, dan baru saja mengalami rebranding penting: templUI resmi berganti nama menjadi shadcn-templ, dengan versi 2.0 beta yang sudah tersedia.

Filosofinya terinspirasi langsung dari shadcn/ui di ekosistem React — bukan library tradisional yang Anda go get lalu import sebagai dependency tertutup, melainkan model kepemilikan kode: komponen di-copy langsung ke proyek Anda lewat CLI, sehingga Anda bebas memodifikasinya tanpa terikat versi upstream.

Karakteristik utamanya:

• Dibangun di atas templ + Alpine.js + Tailwind CSS.
• CSP compliant (Content Security Policy) — penting untuk aplikasi yang menerapkan kebijakan keamanan header ketat.
• Koleksi komponennya cukup lengkap: Accordion, Dialog, Combobox, Command Palette, Data Table, Sidebar, Calendar, dan puluhan lainnya — mengikuti daftar komponen shadcn/ui di React.
• Dua cara pakai: lewat CLI untuk kepemilikan penuh source code, atau lewat import langsung sebagai dependency untuk workflow yang lebih sederhana.

Cocok untuk tim yang familiar dengan shadcn/ui di React dan ingin pengalaman serupa di Go — terutama untuk dashboard internal atau aplikasi enterprise yang butuh komponen kompleks (data table, command palette) tanpa menulis dari nol.

Goshtoso dan goship.it (goshipit)

Dua library ini mengambil pendekatan berbeda: alih-alih terinspirasi shadcn/ui, keduanya membungkus DaisyUI — plugin komponen populer untuk Tailwind CSS — menjadi komponen templ siap pakai.

goship.it (goshipit) secara eksplisit memposisikan diri sebagai pelengkap GOTH stack, mengonversi komponen DaisyUI ke templ yang bisa dikustomisasi lewat Tailwind maupun DaisyUI langsung. Library ini bahkan punya tool generator internal yang otomatis membuat dokumentasi dan contoh kode dari komponen yang ada.

Goshtoso menekankan filosofi "satu binary, tanpa node_modules" — templ merender HTML, HTMX menangani swap fragmen, dan Alpine.js menambah interaktivitas lokal, semuanya dibundel jadi satu binary tunggal saat deploy.

Kalau tim Anda sudah nyaman dengan DaisyUI di proyek Tailwind sebelumnya, kedua library ini terasa familiar sejak hari pertama.

gomponents: Opsi Tanpa Build Step Sama Sekali

Berbeda dari opsi-opsi di atas, gomponents sengaja tidak memakai templ atau build step tambahan apa pun. Semua komponen ditulis sebagai kode Go murni:

func Navbar() Node {
    return Nav(Class("navbar"),
        Ol(
            NavbarItem("Home", "/"),
            NavbarItem("Contact", "/contact"),
        ),
    )
}

Keunggulannya jelas: tidak ada langkah kompilasi terpisah (.templ → .go), langsung kompatibel dengan seluruh tooling Go standar, dan library ini sudah stabil dengan cakupan tes 100% serta dipakai di produksi selama bertahun-tahun oleh pembuatnya. Ada juga ekstensi komunitas seperti gomponents-htmx yang menambahkan helper atribut HTMX.

Trade-off-nya: karena murni fungsi Go bertingkat, markup yang kompleks bisa terasa lebih "berat dibaca" dibanding sintaks mirip-HTML pada templ, terutama bagi developer yang baru pindah dari ekosistem templating tradisional.

Kapan Pakai yang Mana?

Jangan mulai dengan menulis komponen dari nol kalau tidak perlu. Baik shadcn-templ maupun goship.it sudah menyediakan puluhan komponen umum (form, modal, tabel) yang teruji — pakai itu dulu, baru kustomisasi bagian yang benar-benar unik untuk produk Anda.

Kesalahan yang Sering Terjadi

• Mencampur terlalu banyak library styling sekaligus (Tailwind + Bootstrap + custom CSS) — pilih satu fondasi styling di awal proyek, jangan di tengah jalan.
• Menganggap HTMX otomatis menggantikan seluruh kebutuhan JavaScript — untuk state kompleks di sisi klien (drag-and-drop rumit, editor real-time), kombinasi Go+HTMX mungkin bukan pilihan tepat; SPA tradisional masih lebih cocok.
• Lupa CSP saat memilih library — kalau aplikasi Anda menerapkan Content Security Policy ketat, pastikan library yang dipilih (seperti shadcn-templ) memang CSP compliant, bukan mengandalkan inline script.

Penutup

Stack Go untuk UI sekarang jauh lebih matang dibanding beberapa tahun lalu. templ sebagai fondasi type-safe, dipadukan HTMX untuk interaktivitas dan salah satu component library di atas, memungkinkan Anda membangun aplikasi web lengkap — dari backend sampai UI — tanpa pernah meninggalkan Go maupun mengelola node_modules.

Kalau Anda baru memulai: coba shadcn-templ untuk komponen enterprise-grade dengan model kepemilikan kode ala shadcn/ui, atau gomponents kalau ingin pendekatan paling minimalis tanpa build step tambahan. Keduanya representasi yang baik dari dua filosofi berbeda yang hidup berdampingan di ekosistem Go — dan tidak ada yang salah untuk dicoba dulu sebelum berkomitmen.