gomponents +

gomponents works great together with TailwindCSS. In fact, this page is built using gomponents and TailwindCSS! Check out the source of this page.

There's also the gomponents starter kit, which includes TailwindCSS.

Example

package main

import (
	. "maragu.dev/gomponents"
	. "maragu.dev/gomponents/html"
)

func Navbar() Node {
	return Nav(Class("bg-gray-800 flex items-center space-x-4"),
		A(Href("/"), Text("Home")),
		A(Href("/about"), Text("About")),
	)
}

IntelliSense

You can get TailwindCSS auto-completion directly in your Go files! Check the readme in the gomponents starter kit for instructions.

gomponents and Bulma also go well together. Check out bulma-gomponents by willoma for easy integration.

Example

package main

import (
	b "github.com/willoma/bulma-gomponents"
	. "maragu.dev/gomponents"
)

func Navbar() Node {
	return b.Navbar(
		b.Dark,
		b.NavbarStart(
			b.NavbarAHref("/", "Home"),
			b.NavbarAHref("/about", "About"),
		),
	)
}

HTMX is a tiny Javascript library to give access to AJAX, websockets, and more, using HTML attributes. This fits perfectly with gomponents when you need that extra bit of client-side interactivity. Check out the gomponents-htmx library on Github.

There's also the gomponents starter kit, which includes HTMX.

Example

package main

import (
	. "maragu.dev/gomponents"
	hx "maragu.dev/gomponents-htmx"
	. "maragu.dev/gomponents/html"
)

func Navbar() Node {
	return Nav(hx.Boost("true"),
		A(Href("/"), Text("Home")),
		A(Href("/about"), Text("About")),
	)
}

AlpineJS is a minimal framework for composing JavaScript behavior in your markup. It's a great fit with gomponents for adding client-side interactivity to your components. Check out gomponents-alpine on Github for integration with gomponents.

Example

package main

import (
	x "github.com/glsubri/gomponents-alpine"
	. "maragu.dev/gomponents"
	. "maragu.dev/gomponents/html"
)

func Navbar() Node {
	return Nav(
		A(Href("/"), Text("Home")),

		x.Data("{ submenu: false }"),
		A(x.On("click", "submenu = ! submenu"), Href("/about"), Text("About")),
		Div(x.Show("submenu"), Div(
		// …
		)),
	)
}

Heroicons are a collection of handcrafted SVG icons, by the makers of TailwindCSS. They work great together with gomponents! Check out the gomponents-heroicons library on Github.

Example

package icons

import (
	"github.com/maragudk/gomponents-heroicons/v2/solid"
	. "maragu.dev/gomponents"
	. "maragu.dev/gomponents/html"
)

func Navbar() Node {
	return Nav(Class("bg-gray-800 flex items-center space-x-4"),
		solid.ArrowRight(Class("h-6 w-6")),
		A(Href("/"), Text("Home")),
		A(Href("/about"), Text("About")),
	)
}

Iconify is a large set of gomponents icons created by delaneyj, from the Iconify project.

Example

package iconify

import (
	"github.com/delaneyj/gomponents-iconify/iconify/maki"
	. "maragu.dev/gomponents"
	. "maragu.dev/gomponents/html"
)

func Navbar() Node {
	return Nav(Class("bg-gray-800 flex items-center space-x-4"),
		maki.Beach(),
		A(Href("/"), Text("Home")),
		A(Href("/about"), Text("About")),
	)
}

Lucide Icons are a collection of many beautiful & consistent icons made by the community. You can easily use them with gomponents, check out the gomponents-lucide library on Github.

Example

package main

import (
	"github.com/eduardolat/gomponents-lucide"
	. "maragu.dev/gomponents"
	. "maragu.dev/gomponents/html"
)

func myPage() Node {
	return Div(
		lucide.Star(),
		lucide.Languages(),
		lucide.Usb(),
		//...
		lucide.Cherry(
			// You can add any attributes you want
			// to customize the SVG
			Class("w-6 h-6 text-blue-500"),
		),
	)
}