templ-components

What problem does it solve?

Building scalable UIs requires reusable, strongly-typed components that can be composed to form complex interfaces. This Skill provides templ-based components with prop typing, children composition, and a library of common patterns to speed UI development.

Core Features & Use Cases

• Basic Component: templ Button(text string) defines a simple, reusable button component.
• Component with Multiple Props: templ Button(text string, variant string, disabled bool) demonstrates multiple props handling.
• Component with Children: templ Card(title string) shows how child content can be composed inside a component.
• Component with Struct Props: using typed structs to pass multiple related properties.
• Common Components: Button Variants, Card, List, Modal to accelerate UI composition.
• Layout Components: Container, Grid, Navigation for layout scaffolding.
• Composition Patterns: Slots, Render Props, Wrapper Components for flexible composition.
• Best Practices: guidelines for type-safety and maintainable component APIs.

Quick Start

Create a minimal templ component library by adding Button, Card, and Layout components, then render them in a sample page to verify they compose correctly.