display.Card(display.CardProps{Title: "Users", Subtitle: "Manage your team"}) {
	<p>Card content</p>
}

display.Button(display.ButtonProps{Text: "Save", Variant: display.ButtonPrimary})

@display.Modal(display.ModalProps{Title: "Confirm", Size: display.ModalSizeMD}) {
	<p>Are you sure?</p>
}

display.Table(display.TableProps{
	Headers: []string{"Name", "Email", "Role"},
	Rows: []display.TableRow{
		display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
	},
	Striped: true,
	Hover:   true,
})

@display.DateRange(display.DateRangeProps{
	Start: &start, // End nil renders "Present"
	Layout: display.DateFormatJan2_2006,
})

display.Grid(display.GridProps{Cols: display.GridCols3, Gap: display.GridGapLG}) {
	for _, u := range users {
		@display.Card(display.CardProps{Title: u.Name}) { <p>{ u.Email }</p> }
	}
}

Right-click the area below:

Version: v1.9.0 Build: 2026-08-29T08:14:45Z

feedback.Alert(feedback.AlertProps{Title: "Saved", Message: "Changes saved.", Type: feedback.FeedbackSuccess})

feedback.Toast(feedback.ToastProps{Message: "Saved!", Type: feedback.FeedbackSuccess, Duration: 5000})

Full-screen overlay for page transitions — pinned to this frame for the demo via a Class override:

forms.Input(forms.InputProps{Name: "email", Type: forms.InputEmail, Label: "Email"})

Click to fetch the next batch from /api/items — the button replaces itself with the response:

hx-trigger="revealed" — fires as soon as the button scrolls into view:

Global HTMX loading overlay (shows during any htmx request — try any button below):

Per-target loading indicator (shown via hx-indicator):

Click — the button swaps to its loading state during the request:

Deletes the item below via HTMX after a confirmation dialog:

Renders a hidden CSRF input field:

Out-of-band swap element (processed by HTMX after a response):

Wires up htmx:responseError and htmx:beforeOnError events:

Enables native View Transitions on HTMX swaps — pages cross-fade instead of hard-cutting, with graceful degradation in browsers without support.

htmx.ViewTransitions(htmx.ViewTransitionsProps{Global: true, Nonce: nonce})

Auto-refreshing region polling /api/demo-stats every 5s (stops after 3 ticks):

Injects the Datastar runtime as an ES module. Load once per page:

SSE-powered region that auto-connects on page load and self-heals across server restarts (retry: 'always'). The server pushes datastar-patch-elements events to patch the content in real-time (no polling):

Shows/hides based on a Datastar indicator signal. Place data-indicator:fetching on any element that triggers a backend action:

Typed helpers for building Datastar action expressions:

datastar.Get("/api/search")       // @get('/api/search')
datastar.Post("/api/save")      // @post('/api/save')
datastar.Delete("/api/items/1") // @delete('/api/items/1')

Global listener for Datastar stream failures (datastar-fetch events with type error or retries-failed) that surfaces them as accessible toasts — the Datastar counterpart to HTMX GlobalErrorHandling:

@feedback.ToastContainer("")
@datastar.SSEErrorHandling(datastar.DefaultSSEErrorHandlingConfig())

charts/echarts is a separate opt-in module: it wraps go-echarts RenderSnippet() output in a CSP-safe container and bridges dark mode — toggle the theme and watch the chart re-theme.

import echarts "github.com/larsartmann/templ-components/charts/echarts"

@echarts.SDKScript(echarts.DefaultSDKScriptProps())
@echarts.EChart(echarts.EChartsProps{
	Element: snippet.Element, // from go-echarts RenderSnippet()
	Script:  snippet.Script,
	Nonce:   nonce,
})