Skip to content
templ-components

API Reference

Packages

Section titled “Packages”
Package Components Purpose
display 30 Cards, tables, modals, badges, buttons, avatars, carousel, tabs, accordion
feedback 13 Alerts, toasts, spinners, skeletons, progress bars
forms 21 Inputs, selects, toggles, combobox, slider, rating, tags input
layout 6 Page shell, theme toggle, CSP-safe script/style tags
navigation 12 Nav bars, pagination, breadcrumbs, sidebar, load-more
htmx 8 Loading, error handling, OOB swaps, View Transitions
icons 102 Heroicons v2 outline + Spinner
errorpage 4 Error pages, 404, go-error-family integration
utils — BaseProps, Class(), EnsureID, test helpers

Full Godoc

Section titled “Full Godoc”

Complete API documentation is available on pkg.go.dev.

Key Types

Section titled “Key Types”

BaseProps

Section titled “BaseProps”

Every props struct embeds utils.BaseProps:

type BaseProps struct {
    ID        string
    Class     string
    Attrs     templ.Attributes
    AriaLabel string
    Nonce     string
}

Override Props

Section titled “Override Props”

Some components expose additional typed class overrides so you can tweak their internal layout without replacing the whole component. For example, CardProps includes TitleClass and HeaderClass:

@display.Card(display.CardProps{
    Title:       "Users",
    TitleClass:  "text-indigo-600",
    HeaderClass: "bg-gray-50 dark:bg-gray-900/50",
}) {
    <p>Card content</p>
}

Typed Enums

Section titled “Typed Enums”

37 typed string enums make invalid states unrepresentable. Each ships with an IsValid() method.

type BadgeType string
const (
    BadgePrimary BadgeType = "primary"
    BadgeNeutral BadgeType = "neutral"
    BadgeSuccess BadgeType = "success"
    BadgeWarning BadgeType = "warning"
    BadgeError   BadgeType = "error"
    BadgeInfo    BadgeType = "info"
)

Lookup Maps

Section titled “Lookup Maps”

All style lookups use typed maps with utils.Lookup() fallback — no switches, no panics on unknown values.

Import Paths

Section titled “Import Paths”
import (
    "github.com/larsartmann/templ-components/display"
    "github.com/larsartmann/templ-components/feedback"
    "github.com/larsartmann/templ-components/forms"
    "github.com/larsartmann/templ-components/layout"
    "github.com/larsartmann/templ-components/navigation"
    "github.com/larsartmann/templ-components/htmx"
    "github.com/larsartmann/templ-components/icons"
    "github.com/larsartmann/templ-components/errorpage"
    "github.com/larsartmann/templ-components/utils"
)