templ-components

name	templ-components
description	Create reusable templ UI components with props, children, and composition patterns. Use when building UI components, creating component libraries, mentions 'button component', 'card component', or 'reusable 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