Gopher logo

gomponents +

Let's build reusable components together. 🌟

Have you built something with gomponents that other developers can use? Create an issue on Github and we can work together to add it here. 😎

TailwindCSS

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

Example

package icons

import (
	g "github.com/maragudk/gomponents"
	. "github.com/maragudk/gomponents/html"
)

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

Heroicons

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 (
	g "github.com/maragudk/gomponents"
	"github.com/maragudk/gomponents-heroicons/solid"
	. "github.com/maragudk/gomponents/html"
)

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