UI components reference

The components of views/ui, the package anetos new writes into a web project, which the layout and the pages of make:crud and make:auth call. The package is your app’s: this page describes it as anetos new writes it. See Style your app for changing it.

Every component exists for every CSS framework, with the same name and arguments. The tables show what the starter theme (anetos) writes; none writes the same elements without classes, and Pico, Bootstrap and Bulma (and Tailwind CSS) write their framework’s markup.

// illustrative
@ui.Card("Profile") {
	@ui.Form(web.MustURL(ctx, "settings.profile"), "POST", nil) {
		@ui.Field("name", "Name", "As others see it") {
			@ui.Input("name", "", view.Old(ctx, "name", user.Name), templ.Attributes{"autocomplete": "name"})
		}
		@ui.Actions() {
			@ui.Button(ui.Primary, nil) {
				Save
			}
		}
	}
}

A component marked children takes content in { }. An attrs argument (templ.Attributes, or nil) adds attributes to the element, such as templ.Attributes{"autocomplete": "email"} or htmx’s hx-post; it shouldn’t repeat one the component writes.

The page’s shell

views/ui/shell.templ. The layout (views/layout.templ) puts these together.

A page’s structure

views/ui/page.templ.

Forms

views/ui/form.templ. A control (Input, Textarea, Select, Checkbox) is named after its field, which is its id too (two controls of one name on a page would share an id: give one form’s field another name). Pass view.Old(ctx, name, current) as its value, so it shows what was typed when validation failed.

Lists and values

views/ui/data.templ.

Variants and sizes

Button, LinkButton and PostButton take a variant (ui.Variant), then any sizes (ui.Size), as Bootstrap and shadcn/ui name them: @ui.LinkButton(url, ui.Secondary, ui.Small).

Tones

What a color means (ui.Tone), for Badge and Flash.

Types

In views/ui/ui.go, shared by every CSS framework.

// illustrative
if page.LastPage > 1 {
	@ui.Pagination(ui.PagesOf(ctx, page, "Pages", fmt.Sprintf("Page %d of %d", page.CurrentPage, page.LastPage), "Previous", "Next"))
}

What reads the request

Some components read the request’s context (ctx), so they need a page rendered for a request (c.Render, web.Render):

The others write only their arguments. Arguments made with web.MustURL need a request too: rendering a page outside one (with context.Background() in a test) panics where web.URL returned an error.

Helpers for the components’ arguments

These are the framework’s, not views/ui’s; the views reference has the rest.

none: plain HTML

anetos new --css=none writes the same components, with plain HTML and no classes. The differences:

Its app.css holds only a comment, and there is no classes.go.

Pico, Bootstrap and Bulma

anetos new --css=pico, --css=bootstrap and --css=bulma write the same components in their framework’s markup, its stylesheet (and JavaScript) as released into public/static/ with its license, and an app.css for the rest:

The menu button’s name is nav.menu in locales/<locale>/app.yaml (“Menu”). Each version of the CLI writes the framework releases above; a newer release of a framework comes with a newer CLI, or replace its files in public/static/ yourself.

Tailwind CSS

anetos new --css=tailwind writes the components with Tailwind CSS 4.3.3’s utility classes, the source stylesheet views/ui/tailwind.css and public/static/app.css, which Tailwind compiles from it (anetos dev, anetos build and anetos css:build run Tailwind; Tailwind CSS). classes.go holds the classes of each variant and size (Variant.class) and tone (Tone.badge, Tone.flash) and of the form controls (control).

tailwind.css also styles the pages’ plain HTML, which Tailwind’s reset leaves bare: the body, links, h1, h2, lists and paragraphs in <main>, code, small, th and td.