Templ Components

Templ Components

Use progressive disclosure: solve with Level 1 first, then pull deeper guidance only if complexity requires it.

Level 1: Component Checklist

Use this skill for reusable templ UI components.

1. Define a small, single-purpose component.
2. Prefer typed props (structs for complex APIs).
3. Support composition with { children... }.
4. Keep variants explicit and predictable.
5. Extract shared layout wrappers instead of duplicating markup.

type ButtonProps struct {
    Label    string
    Variant  string
    Disabled bool
}

templ Button(props ButtonProps) {
    <button class={ "btn btn-" + props.Variant } disabled?={ props.Disabled }>
        { props.Label }
    </button>
}

Level 2: API Design Rules

• Small surface area: avoid giant prop lists.
• Typed options: enums/constants beat free-form strings for critical variants.
• Composition first: prefer wrappers (Card, Modal, Layout) over monolith components.
• No hidden side effects: components render; handlers/loaders do data work.
• Stable contracts: avoid breaking prop shape without migration.

Level 3: Reusable Patterns

templ Card(title string) {
    <article class="card">
        <header><h3>{ title }</h3></header>
        <div class="card-body">{ children... }</div>
    </article>
}

templ WithError(err error) {
    if err != nil {
        <p class="error">{ err.Error() }</p>
    } else {
        { children... }
    }
}

Escalate to Other Skills

• Need syntax details: use templ-syntax.
• Need HTTP routing/rendering: use templ-http.
• Need partial updates/interactions: use templ-htmx.

References

• Foundations: resources/foundations.md
• Patterns: resources/patterns.md
• Testing and API notes: resources/testing-and-api.md
• templ component guide: https://templ.guide/component-composition/
• templ API docs: https://pkg.go.dev/github.com/a-h/templ