# Templ Components

> 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'. Use when this capability is needed.

- Skill: `tomevault-io/templ-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/templ-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/templ-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/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.

```templ
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
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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/xe) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->