layout

func Base ¶

func Base(props PageProps) templ.Component

Base renders a complete HTML5 base layout with HTMX, theme support, and meta tags Use with children... to inject page content into the body

@layout.Base(props) {
  <h1>My Page</h1>
}

func Minimal ¶

func Minimal(props MinimalProps) templ.Component

Minimal renders a minimal HTML5 document without HTMX or external dependencies. Defaults Locale to "en" when empty (valid HTML lang attribute). Useful for static pages, emails, or PDF generation

@layout.Minimal(layout.MinimalProps{Title: "My Title"}) {
  <h1>Hello</h1>
}

func Script ¶ added in v0.7.0

func Script(nonce string, src string, attrs templ.Attributes) templ.Component

Script renders a CSP-safe external `<script src="...">` tag with the nonce applied automatically. Use it instead of a raw `<script>` tag so the nonce can never be forgotten — under a strict Content-Security-Policy a forgotten nonce silently breaks the script in the browser with no error in your logs.

Pass optional attributes (async, defer, type="module", crossorigin, …) via attrs. Do not pass `nonce` via attrs; the nonce parameter owns it.

@layout.Script(nonce, "/static/app.js", nil)
@layout.Script(nonce, "/static/app.js", templ.Attributes{"defer": true})
@layout.Script(nonce, "/static/tailwind.min.js", templ.Attributes{"type": "module"})

package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/layout"
)

func main() {
	var buf bytes.Buffer
	_ = layout.Script("nonce-abc", "/static/app.js", nil).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain a CSP-safe script tag with nonce
}

Output:

func Stylesheet ¶ added in v0.7.0

func Stylesheet(href string, attrs templ.Attributes) templ.Component

Stylesheet renders a CSP-safe `<link rel="stylesheet">` tag. Companion to Script — ensures consistent, auditable external resource loading. While stylesheets are not subject to script-src nonce restrictions, this helper provides a single pattern for all external resource tags.

Pass optional attributes (media, crossorigin, integrity) via attrs.

@layout.Stylesheet("/static/app.css", nil)
@layout.Stylesheet("/static/print.css", templ.Attributes{"media": "print"})

func ThemeScript ¶

func ThemeScript(nonce string) templ.Component

ThemeScript renders the inline script that sets the dark mode class before paint. Also sets `color-scheme` so native scrollbars, form controls, and <details> match the active theme. Include this in your base template head to prevent FOUC.

Only needed for the TOGGLE dark mode strategy (user-controlled .dark class). If you use OS-following (prefers-color-scheme), you do NOT need this script — Tailwind v4's default dark: variant handles it automatically.

func ThemeToggle ¶

func ThemeToggle(ariaLabel string, nonce string) templ.Component

ThemeToggle renders a theme toggle button with sun/moon icons. Uses role="switch" + aria-checked so screen-reader users know the active mode. Requires Tailwind CSS dark: variants and the ThemeScript in your base layout.

Only needed for the TOGGLE dark mode strategy (user-controlled .dark class). If you use OS-following (prefers-color-scheme), dark mode is automatic — there is nothing to toggle and this component is unnecessary.

@layout.ThemeToggle("Toggle theme", nonce)