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) {
    
        { props.Label }
    
}

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) {
    
        { title }
        { children... }
    
}

templ WithError(err error) {
    if err != nil {
        { err.Error() }
    } 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Xe
• Source: Xe/skills
• License: MIT

Install and usage instructions live in the source repository linked above.