Build Go web apps
without a frontend framework.
97 server-rendered components for templ + HTMX + Tailwind CSS v4. Type-safe props, dark mode built-in, CSP-ready, zero Node.js.
package main
import (
"github.com/larsartmann/templ-components/display"
"github.com/larsartmann/templ-components/feedback"
"github.com/larsartmann/templ-components/layout"
)
templ Page() {
@layout.Base(layout.DefaultPageProps()) {
@layout.ThemeScript("")
@display.PageHeader(display.PageHeaderProps{
Title: "Dashboard",
Subtitle: "Welcome back",
})
@display.Grid(display.GridProps{
Cols: display.GridCols3,
}) {
@display.StatCard(display.StatCardProps{
Label: "Revenue",
Value: "$42,189",
Trend: display.TrendUp,
})
}
@feedback.Toast(feedback.ToastProps{
Message: "Data refreshed!",
Type: feedback.ToastSuccess,
})
}
}Everything you need to ship.
97 components with type safety, accessibility, and dark mode baked in. No frontend framework required.
Type-Safe Props
34 typed string enums make invalid states unrepresentable. Every props struct embeds BaseProps for consistent ID, class, ARIA, and CSP nonce propagation.
Zero Node.js
Pure Go + templ + Tailwind CSS v4. No build pipeline beyond templ generate. No npm, no bundlers, no SPA framework. CSS-first config, class-based dark mode.
Server-Rendered
Every component renders HTML on the server. HATEOAS-aligned: JavaScript enhances rather than replaces HTML. Interactive features use minimal vanilla JS with CSP nonces.
Built-in Dark Mode
Every component has dark: variants for all neutral and semantic colors, enforced by regression tests. ThemeScript prevents FOUC. color-scheme for native form controls.
CSP-Ready
All inline scripts use nonce attributes. No eval(), no inline event handlers. Integration test suite verifies nonce compliance on every inline script across all components.
HTMX Integration
Dedicated htmx package with loading indicators, error handling, CSRF protection, out-of-band swaps, and View Transitions. First-class server-rendered HTMX patterns.
Four steps. No frontend framework.
Import, render, generate, ship. The server renders HTML; HTMX enhances where needed.
Import
Pick only the packages you need. No monolithic bundle — pay for what you use.
import "github.com/larsartmann/templ-components/display" Render
Pass typed props structs. Every invalid state is a compile-time error, not a runtime check.
@display.Card(display.CardProps{Title: "Hello"}) { ... } Generate
templ generate compiles .templ files to Go. The generated code is committed for library consumers.
templ generate ./... Ship
Server renders HTML. HTMX enhances where needed. No client-side framework required.
// HTML over the wire — done Why templ-components?
Type safety, CSP compliance, and HTMX integration that alternatives don't offer.
| templUI | goshipit | templ-components | |
|---|---|---|---|
| CSS approach | Tailwind + vars | Tailwind + DaisyUI | Tailwind v4 CSS-first |
| JavaScript | Alpine.js | DaisyUI JS | HATEOAS (enhances HTML) |
| Requires Node.js | |||
| Typed props enums | 34 | ||
| CSP nonce support | |||
| Dark mode | CSS vars | DaisyUI | Tailwind dark: (tested) |
| HTMX integration | |||
| Standalone library |
Built for real Go apps.
Drop in components for admin panels, forms, and SaaS interfaces.
Admin Dashboards
Tables, stat cards, charts, and sidebars. Build data-dense panels in minutes, not days.
Forms & CRUD
21 form components with validation, comboboxes, date pickers, and accessible error handling.
SaaS Interfaces
Navigation, modals, drawers, tabs, and breadcrumbs. Full app chrome without a frontend framework.
Install in 30 seconds.
go get, templ generate, ship. No Node.js required.