display

package
v1.11.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Aug 22, 2026 License: MIT Imports: 15 Imported by: 0

Documentation

Overview

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Button component: variant/size enums, default props, and class lookups.

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Package display provides UI components for data visualization and interactive elements including cards, tables, tabs, dropdowns, modals, tooltips, avatars, badges, and more.

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Modal component: size enum, default props, and class lookup.

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Index

Examples

Constants

View Source 
const CountBadgeDefaultMax = 99

CountBadgeDefaultMax is the standard overflow threshold (99).

Variables

View Source 
var DateRangeDefaults = struct {
	Layout      DateFormat
	PresentText string
	Separator   string
}{
	Layout:      DateFormatJanuary2006,
	PresentText: "Present",
	Separator:   "–",
}

DateRangeDefaults are used when props fields are zero.

Functions

func Accordion 

func Accordion(props AccordionProps) templ.Component

Accordion renders a collapsible accordion using native <details>/<summary> elements for zero-JS toggle, native keyboard support, and built-in accessibility (implicit aria-expanded, role=group). 

@display.Accordion(display.AccordionProps{
   Items: []display.AccordionItem{
     {ID: "faq1", Title: "What is this?", Open: true},
     {ID: "faq2", Title: "How does it work?"},
   },
})

func AreaChart added in v1.7.0 

func AreaChart(props AreaChartProps) templ.Component

AreaChart renders a pure-SVG area chart with axes, gridlines, multi-series filled areas, optional dots, and a legend. Zero JavaScript — all rendering is server-side. Each series renders both a stroked line and a semi-transparent fill from the line down to the baseline. 

@display.AreaChart(display.AreaChartProps{
    Series: []display.LineChartSeries{
        {Name: "Active Users", Values: []float64{120, 180, 250, 300, 280, 340}},
    },
    XAxisLabels: []string{"Jan", "Feb", "Mar", "Apr", "May", "Jun"},
})

func Avatar 

func Avatar(props AvatarProps) templ.Component

Avatar renders a user avatar with image, initials, or fallback 

@display.Avatar(display.AvatarProps{Src: "/avatar.jpg", Alt: "Alice"})

func AvatarShapeIsValid added in v0.7.0 

func AvatarShapeIsValid(v AvatarShape) bool

AvatarShapeIsValid reports whether v is one of the defined AvatarShape constants.

func AvatarSizeIsValid added in v0.7.0 

func AvatarSizeIsValid(v AvatarSize) bool

AvatarSizeIsValid reports whether v is one of the defined AvatarSize constants.

func AvatarStatusIsValid added in v0.8.0 

func AvatarStatusIsValid(v AvatarStatus) bool

AvatarStatusIsValid reports whether v is one of the defined AvatarStatus constants.

func Badge 

func Badge(props BadgeProps) templ.Component

Badge renders a compact status label 

@display.Badge(display.BadgeProps{Text: "Active", Type: display.BadgeSuccess, Dot: true})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	props := display.DefaultBadgeProps()
	props.Text = "Beta"
	props.Type = display.BadgeInfo

	var buf bytes.Buffer

	_ = display.Badge(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain the badge text and Tailwind classes
}

func BadgeSizeIsValid added in v0.7.0 

func BadgeSizeIsValid(v BadgeSize) bool

BadgeSizeIsValid reports whether v is one of the defined BadgeSize constants.

func BadgeTypeIsValid added in v0.7.0 

func BadgeTypeIsValid(v BadgeType) bool

BadgeTypeIsValid reports whether v is one of the defined BadgeType constants.

func BarChart added in v1.5.0 

func BarChart(props BarChartProps) templ.Component

BarChart renders a CSS-based bar chart — no JavaScript, no SVG. Horizontal orientation shows label bars; vertical shows columns. The chart is responsive and dark-mode aware. 

@display.BarChart(display.BarChartProps{
   Bars: []display.BarChartBar{
       {Label: "general", Value: 1200},
       {Label: "random", Value: 800},
       {Label: "dev", Value: 450},
   },
})

func BarOrientIsValid added in v1.5.0 

func BarOrientIsValid(v BarOrient) bool

BarOrientIsValid reports whether v is one of the defined BarOrient constants.

func BuildAreaPath added in v1.7.0 

func BuildAreaPath(points []Point, height int) string

BuildAreaPath builds a closed SVG path for a filled area: the polyline through the points, then down to the baseline and back to the start. The baseline is the bottom of the plot area (y = height).

func BuildPolylinePath added in v1.7.0 

func BuildPolylinePath(points []Point) string

BuildPolylinePath builds an SVG path string connecting the given points with straight line segments: "M x,y L x,y ...". Returns "" for an empty slice.

func BuildSmoothPath added in v1.7.0 

func BuildSmoothPath(points []Point) string

BuildSmoothPath builds an SVG path string using cubic Bezier curves derived from a Catmull-Rom spline through the points. This produces visually smooth lines. Falls back to a straight polyline for fewer than 3 points.

func Button 

func Button(props ButtonProps) templ.Component

Button renders a button or link styled as a button. When Href is set, renders as an anchor tag; otherwise renders as a button element. 

@display.Button(display.DefaultButtonProps())
@display.Button(display.ButtonProps{Text: "Save", Type: display.ButtonHTMLSubmit})
@display.Button(display.ButtonProps{Text: "Docs", Href: "/docs", Variant: display.ButtonSecondary})

func ButtonHTMLTypeIsValid added in v0.8.0 

func ButtonHTMLTypeIsValid(v ButtonHTMLType) bool

ButtonHTMLTypeIsValid reports whether v is one of the defined ButtonHTMLType constants.

func ButtonSizeIsValid added in v0.8.0 

func ButtonSizeIsValid(v ButtonSize) bool

ButtonSizeIsValid reports whether v is one of the defined ButtonSize constants.

func ButtonTypeIsValid added in v0.7.0 

func ButtonTypeIsValid(v ButtonType) bool

ButtonTypeIsValid reports whether v is one of the defined ButtonType constants.

func Card 

func Card(props CardProps) templ.Component

Card renders a bordered card with optional header and footer 

@display.Card(display.CardProps{Title: "Users", Subtitle: "Manage your users"}) {
   <p>Card content goes here</p>
 }
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	props := display.DefaultCardProps()
	props.Title = "Hello World"

	var buf bytes.Buffer

	_ = display.Card(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func CardPaddingIsValid added in v0.7.0 

func CardPaddingIsValid(v CardPadding) bool

CardPaddingIsValid reports whether v is one of the defined CardPadding constants. 

func Carousel(props CarouselProps) templ.Component

Carousel renders a slide carousel with native CSS scroll-snap for touch-friendly swiping, momentum scrolling, and smooth programmatic navigation. Prev/next buttons use scrollBy; dots sync via scrollend. 

@display.Carousel(display.CarouselProps{
   Slides: []display.CararouselSlide{
     {Content: templ.Raw("<div>Slide 1</div>")},
     {Content: templ.Raw("<div>Slide 2</div>")},
   },
   ShowIndicators: true,
})

func CollapsibleSection added in v1.6.0 

func CollapsibleSection(props CollapsibleSectionProps) templ.Component

CollapsibleSection wraps content in a native <details>/<summary> pair so users can collapse detail-heavy regions. The section renders open by default. When StorageKey is set, the open/closed state can be persisted to localStorage by a consumer-side script reading the data-collapsible attribute. 

@display.CollapsibleSection(display.CollapsibleSectionProps{
   Title: "Advanced Filters",
   StorageKey: "advanced-filters",
}) {
   <p>Collapsible content here.</p>
}

func ComputeNiceTicks added in v1.7.0 

func ComputeNiceTicks(minVal, maxVal float64, count int) []float64

ComputeNiceTicks produces human-readable axis tick values spanning [minVal, maxVal]. The tick count is approximate — the actual count may differ to produce round numbers (e.g., 0, 25, 50, 75, 100 instead of 0, 23, 46, 69, 92).

func ContextMenu added in v0.17.0 

func ContextMenu(props ContextMenuProps) templ.Component

ContextMenu wraps children in a container that shows a custom context menu on right-click or via the keyboard (Shift+F10 / the Menu key). Uses the native Popover API (popover="auto") for light-dismiss, Escape-to-close, and top-layer rendering. CSP-safe singleton scripts handle the contextmenu → showPopover() cursor positioning, the Shift+F10/ContextMenu trigger-position opener, and shared menu keyboard navigation (ArrowUp/Down with RTL mapping, Home/End, focus-first-on-open). See ADR-0017. 

@display.ContextMenu(display.ContextMenuProps{Items: []display.ContextMenuItem{
   {Text: "Edit", Href: "/edit"},
   {Text: "Delete", Href: "/delete"},
}}) {
   <div class="p-4">Right-click me</div>
}
Example 
_ = ContextMenu(ContextMenuProps{
	Items: []ContextMenuItem{
		{Text: "Edit", Href: "/edit"},
	},
})

func CopyButton added in v0.7.0 

func CopyButton(props CopyButtonProps) templ.Component
Example 
package main

import (
	"bytes"
	"context"

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

func main() {
	props := display.DefaultCopyButtonProps()
	props.Text = "pnpm add my-package"
	props.Label = "Copy command"

	var buf bytes.Buffer

	_ = display.CopyButton(props).Render(context.Background(), &buf)
}

func CountBadge added in v0.7.0 

func CountBadge(props CountBadgeProps) templ.Component

CountBadge renders its children with a count notification badge overlaid in the top-right corner. When Count is 0 the badge is hidden (no element). When Count exceeds Max, the badge displays "Max+" to prevent layout overflow. 

@display.CountBadge(display.CountBadgeProps{Count: 5}) {
   @icons.Icon(icons.Bell, "h-6 w-6")
}
Example 
package main

import (
	"bytes"
	"context"

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

func main() {
	props := display.CountBadgeProps{Count: 12, Max: 99}

	var buf bytes.Buffer

	_ = display.CountBadge(props).Render(context.Background(), &buf)
}

func DataTable added in v0.17.0 

func DataTable(props DataTableProps) templ.Component

DataTable renders a data table with integrated sort management, optional pagination, and empty-state handling. It composes the Table component internally, generating correct sort-toggle URLs for each column header. 

@display.DataTable(display.DataTableProps{
   Columns: []display.DataTableColumn{
     {Label: "Name", Sortable: true},
     {Label: "Email", Sortable: true, SortKey: "email_address"},
     {Label: "Role"},
   },
   Rows: []display.TableRow{
     display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
     display.SimpleTableRow("Bob", "bob@example.com", "User"),
   },
   ActiveSortColumn: "Name",
   ActiveSortDir:    display.SortAsc,
   SortBaseURL:      "/users",
})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	// DataTable wraps Table with integrated sort management, pagination,
	// and empty-state handling. Set SortBaseURL + ActiveSortColumn/Dir to
	// auto-generate sort-toggle links for each column header.
	props := display.DataTableProps{
		Columns: []display.DataTableColumn{
			{Label: "Name", Sortable: true},
			{Label: "Email", Sortable: true, SortKey: "email_address"},
			{Label: "Role"},
		},
		Rows: []display.TableRow{
			display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
			display.SimpleTableRow("Bob", "bob@example.com", "User"),
		},
		ActiveSortColumn: "Name",
		ActiveSortDir:    display.SortAsc,
		SortBaseURL:      "/users",
	}

	var buf bytes.Buffer

	_ = display.DataTable(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func DateRange added in v1.8.2 

func DateRange(props DateRangeProps) templ.Component

DateRange renders a date range with configurable formatting. When End is nil, the PresentText is shown. When Start is nil, only End is shown. When both are equal, only one date is shown (no range). 

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

func DefinitionGrid added in v0.7.0 

func DefinitionGrid(props DefinitionGridProps) templ.Component

DefinitionGrid renders term-detail pairs in a responsive grid. Each pair is wrapped in a SimpleCard so the grid shows a clean dashboard of key-value tiles. Composes through Grid internally for consistent responsive behavior. 

@display.DefinitionGrid(display.DefinitionGridProps{
   Cols: display.GridCols2,
   Items: []display.DefinitionItem{
     {Term: "CPU", Detail: "42%"},
     {Term: "Memory", Detail: "8.2 GB"},
   },
})
Example 
package main

import (
	"bytes"
	"context"

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

func main() {
	props := display.DefinitionGridProps{
		Cols: display.GridCols2,
		Items: []display.DefinitionItem{
			{Term: "CPU", Detail: "42%"},
			{Term: "Memory", Detail: "8.2 GB"},
		},
	}

	var buf bytes.Buffer

	_ = display.DefinitionGrid(props).Render(context.Background(), &buf)
}

func DefinitionList added in v0.6.0 

func DefinitionList(props DefinitionListProps) templ.Component

DefinitionList renders a two-column <dl> with term labels on the left and detail values on the right. Ideal for metadata tables, settings summaries, and key-value display. 

@display.DefinitionList(display.DefinitionListProps{
   Items: []display.DefinitionItem{
     {Term: "Email", Detail: "alice@example.com"},
     {Term: "Status", DetailComponent: display.Badge(display.BadgeProps{Text: "Active", Type: display.BadgeSuccess})},
   },
})

func Drawer added in v0.3.0 

func Drawer(props DrawerProps) templ.Component

Drawer renders an accessible side panel using the native <dialog> element. 

@display.Drawer(display.DrawerProps{Title: "Settings", ID: "settings-drawer", Side: display.DrawerRight, Open: true, Nonce: nonce}) {
   <p>Drawer content</p>
}

The native <dialog> element provides focus trapping, Escape-to-close, top-layer rendering, and ::backdrop. CSS handles slide animations based on the data-side attribute. The tc-drawer class selects the slide animation profile in app.css.

func DrawerSideIsValid added in v0.7.0 

func DrawerSideIsValid(s DrawerSide) bool

DrawerSideIsValid reports whether s is DrawerLeft or DrawerRight.

func DrawerSizeIsValid added in v0.7.0 

func DrawerSizeIsValid(s DrawerSize) bool

DrawerSizeIsValid reports whether s is one of the defined DrawerSize constants. 

func Dropdown(props DropdownProps) templ.Component

Dropdown renders a button-triggered action menu. Uses the native Popover API (popover="auto") for click-toggle via popovertarget, light-dismiss, Escape-to-close, and top-layer rendering. A shared singleton positioner (popoverPositionScriptComponent) anchors the menu to the trigger via getBoundingClientRect(); a thin keyboard-nav script handles ArrowUp/Down (with RTL mapping) and focuses the first menuitem on open. See ADR-0017. 

@display.Dropdown(display.DropdownProps{
   Label: "Actions",
   Items: []display.DropdownItem{
     {Text: "Edit", Href: "/edit"},
     {Text: "Delete", Href: "/delete"},
   },
})

func DropdownItemKindIsValid(v DropdownItemKind) bool

DropdownItemKindIsValid reports whether v is one of the defined DropdownItemKind constants. 

func DropdownPositionIsValid(v DropdownPosition) bool

DropdownPositionIsValid reports whether v is one of the defined DropdownPosition constants.

func EmptyState 

func EmptyState(props EmptyStateProps) templ.Component

EmptyState renders a centered empty state with icon, title, description, and optional action 

@display.EmptyState(display.EmptyStateProps{
   Title: "No repositories",
   Description: "Connect your first repository to get started.",
   Icon: "folder",
   ActionText: "Connect Repository",
   ActionHref: "/repos/connect",
})

func ExternalLink(props ExternalLinkProps) templ.Component

ExternalLink renders an off-site link with the safe-by-default target="_blank" rel="noopener noreferrer" pair — prevents tabnabbing and back-history manipulation.

The href is passed as a PLAIN STRING (not templ.SafeURL) so that templ's built-in URL sanitizer runs: it blocks javascript:, data:, vbscript: and other dangerous schemes by rewriting them to about:invalid. SafeURL would bypass that sanitization — it is a type-assertion, not a validator.

An external-arrow icon (↗) is appended by default for visual affordance. 

@display.ExternalLink(display.ExternalLinkProps{Href: "https://discord.com", Text: "Open in Discord"})
@display.ExternalLink(display.ExternalLinkProps{Href: doc.URL, AriaLabel: "Documentation"}) {
   @icons.Icon(icons.Book, "h-4 w-4")
 }

func Eyebrow added in v1.10.0 

func Eyebrow(props EyebrowProps) templ.Component

Eyebrow renders a small monospace uppercase overline label. Rendered neutral gray by default; pass an accent color via BaseProps.Class (e.g. Class: "text-red-600 dark:text-red-400") to make it the tonal signal of a page family. Renders nothing when Text is empty. 

@display.Eyebrow(display.EyebrowProps{Text: "Deploy #142 · production"})
Example 
package main

import (
	"bytes"
	"context"

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

func main() {
	var buf bytes.Buffer

	_ = display.Eyebrow(display.EyebrowProps{
		Text: "Deploy #142 · production",
	}).Render(context.Background(), &buf)
}

func FormatTickValue added in v1.7.0 

func FormatTickValue(v float64) string

FormatTickValue formats a numeric value for axis tick labels. Whole numbers are shown without decimals; thousands and millions get K/M suffixes; small fractions use up to 1 decimal place.

func Grid added in v0.7.0 

func Grid(props GridProps) templ.Component

Grid renders a responsive grid container that stacks on mobile and expands at sm/lg breakpoints. Pass grid items as children. 

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

For container-query-based responsiveness (grid adapts to its parent container, not the viewport): 

@display.Grid(display.GridProps{Cols: display.GridCols3, ContainerAware: true}) {
   // items
}
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	props := display.DefaultGridProps()

	var buf bytes.Buffer

	_ = display.Grid(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain responsive grid classes
}

func GridColsIsValid added in v0.7.0 

func GridColsIsValid(v GridCols) bool

GridColsIsValid reports whether v is one of the defined GridCols constants.

func GridGapIsValid added in v0.9.0 

func GridGapIsValid(v GridGap) bool

GridGapIsValid reports whether v is one of the defined GridGap constants.

func Heatmap added in v1.6.0 

func Heatmap(props HeatmapProps) templ.Component

Heatmap renders a CSS-based grid heatmap — no JavaScript, no SVG. Each cell's background opacity reflects its value relative to the maximum. The heatmap is responsive, dark-mode aware, and uses native table semantics for accessibility. 

@display.Heatmap(display.HeatmapProps{
   Rows: []display.HeatmapRow{
       {Label: "Mon", Cells: []display.HeatmapCell{
           {Value: 5}, {Value: 12}, {Value: 0}, {Value: 8},
       }},
       {Label: "Tue", Cells: []display.HeatmapCell{
           {Value: 3}, {Value: 20}, {Value: 7}, {Value: 2},
       }},
   },
   ColumnLabels: []string{"00:00", "06:00", "12:00", "18:00"},
   HighlightPeak: true,
})

func HoverCard added in v0.17.0 

func HoverCard(props HoverCardProps) templ.Component

HoverCard wraps a trigger element in a hover-activated card with rich content. The card appears on :hover and :focus-within, using pure CSS opacity transitions. 

@display.HoverCard(display.HoverCardProps{Position: display.HoverCardPositionTop}) {
   <button>Hover me</button>
}
@display.HoverCard.HoverCardContent(display.HoverCardProps{Content: ...})
Example 
_ = HoverCard(HoverCardProps{
	Position: HoverCardPositionTop,
	Content:  templ.Raw("<p>Info</p>"),
})

func HoverCardPositionIsValid added in v0.17.0 

func HoverCardPositionIsValid(v HoverCardPosition) bool

HoverCardPositionIsValid reports whether v is one of the defined HoverCardPosition constants.

func Image added in v0.7.0 

func Image(props ImageProps) templ.Component

Image renders an <img> with lazy loading, optional dimensions, and optional fallback source. The fallback swap is CSP-safe: a data-tc-img-fallback attribute on the img tag is consumed by a singleton error-capture listener.

For responsive images with multiple resolutions, use SrcSet and Sizes: 

@display.Image(display.ImageProps{
    Src:    "/photo.jpg",
    SrcSet: "/photo-480w.jpg 480w, /photo-800w.jpg 800w",
    Sizes:  "(max-width: 600px) 480px, 800px",
    Alt:    "Profile photo",
})

@display.Image(display.ImageProps{Src: "/photo.jpg", Alt: "Profile photo", Width: 128, Height: 128, FallbackSrc: "/placeholder.jpg"})
Example 
package main

import (
	"bytes"
	"context"

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

func main() {
	props := display.ImageProps{
		Src:    "/profile.jpg",
		Alt:    "Profile photo",
		Width:  128,
		Height: 128,
		Lazy:   true,
	}

	var buf bytes.Buffer

	_ = display.Image(props).Render(context.Background(), &buf)
}

func LineChart added in v1.7.0 

func LineChart(props LineChartProps) templ.Component

LineChart renders a pure-SVG line chart with Y-axis ticks, optional gridlines, multi-series support, data-point dots, and a legend. Zero JavaScript — all rendering is server-side. Dark-mode aware via Tailwind dark: variants. 

@display.LineChart(display.LineChartProps{
    Series: []display.LineChartSeries{
        {Name: "Revenue", Values: []float64{10, 25, 40, 35, 60, 55, 80}},
    },
    XAxisLabels: []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
})

func LineChartStyleIsValid added in v1.7.0 

func LineChartStyleIsValid(v LineChartStyle) bool

LineChartStyleIsValid reports whether v is one of the defined LineChartStyle constants.

func ListNote added in v0.6.0 

func ListNote(props ListNoteProps) templ.Component

ListNote renders a "Showing N of M" hint when a list is truncated (Total > Shown). Renders nothing when all rows fit. 

@display.ListNote(display.ListNoteProps{Shown: 50, Total: 127})

func Modal(props ModalProps) templ.Component

Modal renders an accessible modal dialog using the native <dialog> element. 

@display.Modal(display.ModalProps{Title: "Confirm", ID: "confirm-modal", Nonce: nonce}) {
   <p>Are you sure?</p>
}

The native <dialog> element provides focus trapping, Escape-to-close, top-layer rendering, and ::backdrop. CSS handles open/close animations. The tc-modal class selects the scale animation profile in app.css.

func ModalSizeIsValid added in v0.7.0 

func ModalSizeIsValid(s ModalSize) bool

ModalSizeIsValid reports whether s is one of the defined ModalSize constants.

func OverlayKindIsValid added in v0.8.0 

func OverlayKindIsValid(v OverlayKind) bool

OverlayKindIsValid reports whether v is one of the defined OverlayKind constants. 

func PageHeader(props PageHeaderProps) templ.Component

PageHeader renders a page-level header with title, optional subtitle, optional breadcrumb above, and an optional action slot on the right. 

@display.PageHeader(display.PageHeaderProps{
   Title: "Users",
   Subtitle: "Manage user accounts",
   Action: display.Button(display.ButtonProps{Text: "New user", Href: "/users/new"}),
})

func PieChart added in v1.7.0 

func PieChart(props PieChartProps) templ.Component

PieChart renders a pure-SVG pie or donut chart. Zero JavaScript — all rendering is server-side using SVG arc paths. Supports external labels, a legend, and a center label for donut charts. Dark-mode aware. 

@display.PieChart(display.PieChartProps{
    Slices: []display.PieChartSlice{
        {Label: "Direct", Value: 45},
        {Label: "Organic", Value: 30},
        {Label: "Referral", Value: 25},
    },
})

func PieChartLabelModeIsValid added in v1.7.0 

func PieChartLabelModeIsValid(v PieChartLabelMode) bool

PieChartLabelModeIsValid reports whether v is one of the defined PieChartLabelMode constants.

func Popover added in v0.15.0 

func Popover(props PopoverProps) templ.Component

Popover renders a button-triggered floating panel with arbitrary content. Uses the native Popover API (popover="auto") for click-toggle via popovertarget, light-dismiss, Escape-to-close, and top-layer rendering.

Positioning: the Popover API promotes the panel to the top layer with position:fixed (UA stylesheet), detaching it from the trigger's DOM subtree. CSS classes therefore cannot anchor to the trigger. A thin singleton script (popoverPositionScriptComponent) reads the trigger's getBoundingClientRect() on open and sets style.left/top with viewport clamping. See ADR-0017. 

@display.Popover(display.PopoverProps{TriggerText: "Details"}) {
   <p class="text-sm">Popover content goes here.</p>
}

func PopoverPositionIsValid added in v0.15.0 

func PopoverPositionIsValid(v PopoverPosition) bool

PopoverPositionIsValid reports whether v is one of the defined PopoverPosition constants.

func RelativeTime added in v0.7.0 

func RelativeTime(props RelativeTimeProps) templ.Component

RelativeTime renders a <time> element with a human-readable relative timestamp (e.g. "2 hours ago", "just now", "3 days ago"). The datetime attribute carries the RFC 3339 timestamp for accessibility and SEO. 

@display.RelativeTime(display.RelativeTimeProps{Time: createdAt})
@display.RelativeTime(display.RelativeTimeProps{Time: createdAt, AutoRefresh: false}) // static
Example 
package main

import (
	"bytes"
	"context"
	"time"

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

func main() {
	props := display.RelativeTimeProps{
		Time: time.Date(2025, 1, 15, 10, 30, 0, 0, time.UTC),
	}

	var buf bytes.Buffer

	_ = display.RelativeTime(props).Render(context.Background(), &buf)
}

func SanitizeInnerRadius added in v1.8.0 

func SanitizeInnerRadius(r float64) float64

SanitizeInnerRadius clamps the InnerRadius to the valid range [0, 1]. Values outside this range produce broken arc paths (inner radius larger than the pie, or negative hole size). Returns the clamped value.

func Scrollback added in v1.10.0 

func Scrollback(props ScrollbackProps) templ.Component

Scrollback renders a server-rendered, terminal-style log block: monospace lines with a timestamp column and a tone-colored tag column. With Stagger enabled, lines fade in sequentially via CSS nth-child delays — zero JavaScript, and prefers-reduced-motion users see all lines immediately.

The block is decorative by default (aria-hidden). Pass AriaLabel when the lines carry real information screen readers should read. 

@display.Scrollback(display.ScrollbackProps{
   Stagger: true,
   Lines: []display.ScrollbackLine{
       {Timestamp: "12:47:03.184", Tag: "query", Text: "ads.example.com A", Tone: display.ScrollbackToneInfo},
       {Timestamp: "12:47:03.185", Tag: "action", Text: "NXDOMAIN", Tone: display.ScrollbackToneDanger},
   },
})
Example 
package main

import (
	"bytes"
	"context"

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

func main() {
	props := display.DefaultScrollbackProps()
	props.Lines = []display.ScrollbackLine{
		{
			Timestamp: "12:47:03.184", Tag: "query",
			Text: "ads.example.com A", Tone: display.ScrollbackToneInfo,
		},
		{
			Timestamp: "12:47:03.184", Tag: "match",
			Text: "blocklist: StevenBlack/hosts", Tone: display.ScrollbackToneDanger,
		},
		{
			Timestamp: "12:47:03.185", Tag: "action",
			Text: "NXDOMAIN", Tone: display.ScrollbackToneWarning,
		},
	}

	var buf bytes.Buffer

	_ = display.Scrollback(props).Render(context.Background(), &buf)
}

func ScrollbackToneIsValid added in v1.10.0 

func ScrollbackToneIsValid(tone ScrollbackTone) bool

ScrollbackToneIsValid reports whether tone is a known scrollback tone.

func SectionHeading added in v1.8.2 

func SectionHeading(props SectionHeadingProps) templ.Component

SectionHeading renders a section-level heading with configurable heading element (h1-h6), alignment, and optional subtitle. Headings include break-after-avoid for print pagination. Use this for section titles within page content (not the page title itself — use PageHeader for that). 

@display.SectionHeading(display.SectionHeadingProps{
   Title: "Experience",
   Level: display.HeadingLevelH2,
   Align: display.TextAlignCenter,
})

func SimpleCard 

func SimpleCard(props SimpleCardProps) templ.Component

SimpleCard renders a card without header/footer for quick use. Internally composes through Card for consistent shell styling. 

@display.SimpleCard(display.SimpleCardProps{}) {
   <p>Content</p>
 }

func SimpleEmptyState 

func SimpleEmptyState(message string) templ.Component

SimpleEmptyState is a minimal empty state for inline use 

@display.SimpleEmptyState("No items found")

func SortDirectionIsValid added in v0.8.0 

func SortDirectionIsValid(v SortDirection) bool

SortDirectionIsValid reports whether v is one of the defined SortDirection constants.

func Sparkline added in v1.5.0 

func Sparkline(props SparklineProps) templ.Component

Sparkline renders a tiny inline SVG line chart showing a data trend. Pure SVG — no JavaScript. Uses currentColor for stroke so consumers control color via a Tailwind text color class on the parent or the Class prop. 

@display.Sparkline(display.SparklineProps{Values: []float64{1, 3, 2, 5, 4, 6, 3}})
@display.Sparkline(display.SparklineProps{Values: rates, Filled: true, Class: "text-green-500 dark:text-green-400"})

func StatCard 

func StatCard(props StatCardProps) templ.Component

StatCard renders a dashboard stat card with value, label, optional change indicator, and an optional leading icon tile. When Href is set, the whole card is wrapped in an <a> so it acts as a clickable navigation link. 

@display.StatCard(display.StatCardProps{Label: "Users", Value: "1,204", Icon: icons.Users})
@display.StatCard(display.StatCardProps{Label: "Active", Value: "42", Href: "/?activity=active"})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	props := display.DefaultStatCardProps()
	props.Value = "$12,345"
	props.Label = "Total Revenue"
	props.Trend = display.TrendUp
	props.Change = "+12.5%"

	var buf bytes.Buffer

	_ = display.StatCard(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func StatusBadge 

func StatusBadge(status string) templ.Component

StatusBadge is a convenience wrapper for common status values Maps status strings to badge types automatically 

@display.StatusBadge("active")

func Table 

func Table(props TableProps) templ.Component

Table renders a responsive data table 

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

For custom cell rendering, set Body to a component that renders <tr> elements directly — see the Body field on TableProps.

Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	props := display.TableProps{
		Headers: []string{"Name", "Email", "Role"},
		Rows: []display.TableRow{
			display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
			display.SimpleTableRow("Bob", "bob@example.com", "User"),
		},
	}

	var buf bytes.Buffer

	_ = display.Table(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}
Example (FlushInCard) 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	// When nesting a Table inside a Card(CardPaddingNone), set Flush to true
	// to suppress the table's own border and avoid a double-border defect.
	// Use CellPadding: TableCellPaddingCompact for data-heavy dashboards.
	props := display.TableProps{
		Headers:     []string{"Name", "Status"},
		Rows:        []display.TableRow{display.SimpleTableRow("Alice", "Active")},
		Flush:       true,
		CellPadding: display.TableCellPaddingCompact,
	}

	var buf bytes.Buffer

	_ = display.Table(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func TableCellPaddingIsValid added in v0.16.0 

func TableCellPaddingIsValid(v TableCellPadding) bool

TableCellPaddingIsValid reports whether v is one of the defined TableCellPadding constants.

func Tabs 

func Tabs(props TabsProps) templ.Component

Tabs renders a tabbed interface with accessible markup 

@display.Tabs(display.TabsProps{
   ActiveTabID: "users",
   Tabs: []display.Tab{
     {ID: "users", Label: "Users"},
     {ID: "settings", Label: "Settings"},
   },
})

func TabsVariantIsValid added in v0.8.0 

func TabsVariantIsValid(v TabsVariant) bool

TabsVariantIsValid reports whether v is one of the defined TabsVariant constants.

func Tooltip 

func Tooltip(props TooltipProps) templ.Component

Tooltip wraps content in a hover/focus-activated tooltip. Pure CSS for show/hide (group-hover/group-focus-within); a singleton script propagates aria-describedby to the focusable trigger for screen-reader support. 

@display.Tooltip(display.TooltipProps{Text: "More info"}) {
   <button>Hover me</button>
}

func TooltipPositionIsValid added in v0.7.0 

func TooltipPositionIsValid(v TooltipPosition) bool

TooltipPositionIsValid reports whether v is one of the defined TooltipPosition constants.

func TrendDirectionIsValid added in v0.7.0 

func TrendDirectionIsValid(v TrendDirection) bool

TrendDirectionIsValid reports whether v is one of the defined TrendDirection constants.

Types

type AccordionItem 

type AccordionItem struct {
	ID      string
	Title   string
	Content templ.Component
	Open    bool
}

AccordionItem represents a single collapsible panel

type AccordionProps 

type AccordionProps struct {
	utils.BaseProps
	Items []AccordionItem
}

AccordionProps configures an accordion component

func DefaultAccordionProps 

func DefaultAccordionProps() AccordionProps

DefaultAccordionProps returns sensible defaults

type AreaChartProps added in v1.7.0 

type AreaChartProps struct {
	utils.BaseProps

	// Series is the data to plot.
	Series []LineChartSeries

	// XAxisLabels are category labels along the X-axis.
	XAxisLabels []string

	// Width is the SVG canvas width in pixels. Default: 600.
	Width int

	// Height is the SVG canvas height in pixels. Default: 300.
	Height int

	// Padding controls the inset around the plot area.
	Padding ChartPadding

	// Min overrides the auto-computed Y-axis minimum.
	Min *float64

	// Max overrides the auto-computed Y-axis maximum.
	Max *float64

	// ShowGrid renders dashed horizontal gridlines at each Y tick. Default: true.
	ShowGrid bool

	// ShowDots renders a circle at each data point. Default: false (cleaner area look).
	ShowDots bool

	// ShowLegend renders a color-swatch legend above the chart when 2+ series.
	ShowLegend bool

	// Style controls whether lines are straight (Linear) or curved (Smooth).
	Style LineChartStyle

	// FillOpacity controls the transparency of the area fill (0.0–1.0).
	// Default: 0.2.
	FillOpacity float64

	// ValueFormat formats Y-axis tick labels.
	ValueFormat func(float64) string

	// EmptyMessage is shown when Series is empty.
	EmptyMessage string
}

AreaChartProps configures a pure-SVG area chart — a line chart with filled areas beneath each series. Like LineChart, it supports axes, gridlines, multi-series, dots, and a legend. Zero JavaScript.

Each series renders both a line (top edge) and a semi-transparent fill from the line down to the X-axis baseline. Uses currentColor for stroke and fill so Tailwind text-* classes control per-series coloring.

func DefaultAreaChartProps added in v1.7.0 

func DefaultAreaChartProps() AreaChartProps

DefaultAreaChartProps returns sensible defaults for an area chart.

type AvatarProps 

type AvatarProps struct {
	utils.BaseProps
	Src      string
	Alt      string
	Initials string
	Size     AvatarSize
	Shape    AvatarShape
	Status   AvatarStatus
}

AvatarProps configures an avatar component

func DefaultAvatarProps 

func DefaultAvatarProps() AvatarProps

DefaultAvatarProps returns sensible defaults

type AvatarShape 

type AvatarShape string

AvatarShape defines the shape of an avatar 

const (
	AvatarShapeCircle AvatarShape = "circle"
	AvatarShapeSquare AvatarShape = "square"
)

type AvatarSize 

type AvatarSize string

AvatarSize defines the size of an avatar 

const (
	AvatarSizeXS AvatarSize = "xs"
	AvatarSizeSM AvatarSize = "sm"
	AvatarSizeMD AvatarSize = "md"
	AvatarSizeLG AvatarSize = "lg"
	AvatarSizeXL AvatarSize = "xl"
)

type AvatarStatus 

type AvatarStatus string

AvatarStatus represents the online status indicator for an avatar 

const (
	AvatarStatusNone    AvatarStatus = ""
	AvatarStatusOnline  AvatarStatus = "online"
	AvatarStatusOffline AvatarStatus = "offline"
)

type BadgeProps 

type BadgeProps struct {
	utils.BaseProps
	Text string
	Type BadgeType
	Size BadgeSize
	Pill bool
	Dot  bool
	Href string
}

BadgeProps configures a status badge

func DefaultBadgeProps 

func DefaultBadgeProps() BadgeProps

DefaultBadgeProps returns sensible defaults

type BadgeSize 

type BadgeSize string

BadgeSize defines the size of a badge 

const (
	BadgeSizeSM BadgeSize = "sm"
	BadgeSizeMD BadgeSize = "md"
	BadgeSizeLG BadgeSize = "lg"
)

type BadgeType 

type BadgeType string

BadgeType defines the visual style of a badge 

const (
	BadgePrimary BadgeType = "primary"
	BadgeSuccess BadgeType = "success"
	BadgeWarning BadgeType = "warning"
	BadgeError   BadgeType = "error"
	BadgeInfo    BadgeType = "info"
	BadgeNeutral BadgeType = "neutral"
)

type BarChartBar added in v1.5.0 

type BarChartBar struct {
	// Label is the bar's category name (e.g. "general", "Alice").
	Label string

	// Value is the bar's magnitude.
	Value float64

	// Color overrides the default bar color with a Tailwind bg-* class
	// (e.g. "bg-emerald-600 dark:bg-emerald-500"). Empty = use default.
	Color string

	// Href makes the bar label a clickable link.
	Href string

	// Tooltip sets a per-bar title attribute (native browser tooltip).
	// Useful for dense charts where per-bar labels are hidden.
	Tooltip string

	// ValueLabel overrides the auto-formatted value display. When set,
	// this string is shown instead of ValueFormat(Value). Useful for
	// composite labels like "123 (45%)" or "1.2 GB".
	ValueLabel string
}

BarChartBar represents a single bar in a bar chart.

type BarChartProps added in v1.5.0 

type BarChartProps struct {
	utils.BaseProps

	// Bars are the data points to render.
	Bars []BarChartBar

	// Orient is the bar orientation. Default: BarHorizontal.
	Orient BarOrient

	// Max overrides the auto-computed maximum (0 = auto from data).
	Max float64

	// BarColor is the default Tailwind bg-* class for bars without a per-bar
	// Color override. Default: "bg-blue-600 dark:bg-blue-500".
	BarColor string

	// LabelWidth is the label column width for horizontal charts (Tailwind
	// width class, e.g. "w-32"). Default: "w-32".
	LabelWidth string

	// ShowValues renders the numeric value next to each bar.
	ShowValues bool

	// ValueFormat formats the value for display. Default: fmt.Sprintf("%.0f", v).
	ValueFormat func(float64) string

	// EmptyMessage is shown when Bars is empty. Default: "No data".
	EmptyMessage string

	// MinBarWidth sets the minimum width for vertical bars (Tailwind
	// width class, e.g. "min-w-1" for dense time-series). Default: "min-w-12".
	MinBarWidth string

	// Gap controls the spacing between bars (Tailwind gap class,
	// e.g. "gap-px" for dense charts). Default: "gap-2" (vertical),
	// "" (horizontal, uses space-y-2).
	Gap string

	// Height sets the chart container height (CSS value, e.g. "8rem").
	// Essential for vertical charts — percentage bar heights need a
	// definite parent height. No effect on horizontal.
	Height string
}

BarChartProps configures a CSS bar chart.

func DefaultBarChartProps added in v1.5.0 

func DefaultBarChartProps() BarChartProps

DefaultBarChartProps returns sensible defaults for a bar chart.

type BarOrient added in v1.5.0 

type BarOrient string

BarOrient controls bar chart orientation. 

const (
	// BarHorizontal renders bars left-to-right (default).
	BarHorizontal BarOrient = "horizontal"
	// BarVertical renders bars bottom-to-top (column chart).
	BarVertical BarOrient = "vertical"
)

type ButtonHTMLType added in v0.5.0 

type ButtonHTMLType string

ButtonHTMLType is the HTML type attribute for a <button> element. 

const (
	ButtonHTMLButton ButtonHTMLType = "button"
	ButtonHTMLSubmit ButtonHTMLType = "submit"
	ButtonHTMLReset  ButtonHTMLType = "reset"
)

Button HTML type constants.

type ButtonProps 

type ButtonProps struct {
	utils.BaseProps

	Text     string
	Type     ButtonHTMLType // button, submit, reset (default: button; ignored when Href is set)
	Href     string         // if set, renders as <a> instead of <button>
	Variant  ButtonType     // default: Primary
	Size     ButtonSize     // default: MD
	Disabled bool
	Icon     templ.Component
	External bool // adds target="_blank" and rel="noopener noreferrer" for links
}

ButtonProps configures a button or link styled as a button.

func DefaultButtonProps 

func DefaultButtonProps() ButtonProps

DefaultButtonProps returns sensible defaults.

type ButtonSize 

type ButtonSize string

ButtonSize defines the size of a button. 

const (
	ButtonSizeSM ButtonSize = "sm"
	ButtonSizeMD ButtonSize = "md"
	ButtonSizeLG ButtonSize = "lg"
)

Button size constants.

type ButtonType 

type ButtonType string

ButtonType defines the visual style of a button. 

const (
	ButtonPrimary   ButtonType = "primary"
	ButtonSecondary ButtonType = "secondary"
	ButtonDanger    ButtonType = "danger"
	ButtonGhost     ButtonType = "ghost"
	ButtonLink      ButtonType = "link"
)

Button variant constants.

type CardPadding 

type CardPadding string

CardPadding defines the internal padding of a card 

const (
	CardPaddingNone CardPadding = "none"
	CardPaddingSM   CardPadding = "sm"
	CardPaddingMD   CardPadding = "md"
	CardPaddingLG   CardPadding = "lg"
)

type CardProps 

type CardProps struct {
	utils.BaseProps
	Title        string
	Subtitle     string
	Footer       templ.Component
	HeaderAction templ.Component
	// Header, when set, replaces the entire default header section (title,
	// subtitle, header action). Use this for custom header layouts that the
	// Title/Subtitle/HeaderAction fields can't express. When nil, the default
	// header renders if Title or HeaderAction is set.
	Header templ.Component
	// Body, when set, overrides children for the card's main content area.
	// Use this for struct-based composition; pass children for templ-block
	// composition. If both are set, Body takes precedence.
	Body    templ.Component
	Padding CardPadding
	// TitleTag overrides the heading element for the card title.
	// Defaults to "h3" when empty. Set to "h2" when the card is the
	// first heading level after a page <h1> to maintain correct heading
	// order for screen-reader navigation.
	TitleTag string
	// TitleClass, when set, overrides the default <h3> title classes. Consumer
	// classes are merged LAST so they win via tailwind-merge.
	TitleClass string
	// HeaderClass, when set, overrides the default header wrapper classes.
	// Consumer classes are merged LAST so they win via tailwind-merge.
	HeaderClass string
	// ContainerAware, when true, wraps the card in a @container div and swaps
	// sm: breakpoint classes for @sm: so padding adapts to container width,
	// not the viewport. Default false (viewport breakpoints). The @container
	// wrapper applies container-type: inline-size containment, which
	// suppresses the card's intrinsic width: inside shrink-to-fit parents
	// (flex rows, inline-block, auto-sized grid columns) a container-aware
	// card collapses to zero width unless the parent provides a definite
	// width. That is why Card is opt-in. See ADR-0018.
	ContainerAware bool
}

CardProps configures a card container.

Set ContainerAware: true to make padding adapt to the card's parent container width (CSS @container) instead of the viewport. Useful when Card is placed inside a sidebar, grid cell, or other constrained layout. See ADR-0018.

func DefaultCardProps 

func DefaultCardProps() CardProps

DefaultCardProps returns sensible defaults

type CarouselProps added in v0.17.0 

type CarouselProps struct {
	utils.BaseProps
	Slides         []CarouselSlide
	ShowIndicators bool
	ShowArrows     bool
}

CarouselProps configures a content carousel with prev/next navigation. Uses CSS scroll-snap for native touch/drag support and smooth scrolling.

func DefaultCarouselProps added in v0.17.0 

func DefaultCarouselProps() CarouselProps

DefaultCarouselProps returns sensible defaults.

type CarouselSlide added in v0.17.0 

type CarouselSlide struct {
	Content templ.Component
}

CarouselSlide represents a single slide in a carousel.

type ChartLegendItem added in v1.8.0 

type ChartLegendItem struct {
	Name  string
	Color string
	X     int
}

ChartLegendItem holds a computed legend entry for a chart series.

type ChartPadding added in v1.7.0 

type ChartPadding struct {
	Top    int
	Right  int
	Bottom int
	Left   int
}

ChartPadding defines the inset spacing around the plot area in an SVG chart. Left holds Y-axis labels, Bottom holds X-axis labels, Top/Right give breathing room.

func DefaultChartPadding added in v1.7.0 

func DefaultChartPadding() ChartPadding

DefaultChartPadding returns sensible defaults for a 600×300 chart.

func (ChartPadding) Sanitize added in v1.8.0 

func (p ChartPadding) Sanitize() ChartPadding

Sanitize clamps all padding fields to non-negative values. Negative padding produces negative plot dimensions (width - left - right < 0), which corrupt SVG path math. Called by LineChart and AreaChart before rendering.

type ChartRenderData added in v1.8.0 

type ChartRenderData struct {
	Width       int
	Height      int
	Padding     ChartPadding
	PlotW       int
	PlotH       int
	MinVal      float64
	MaxVal      float64
	RangeVal    float64
	Ticks       []float64
	HasData     bool
	LabelCount  int
	XAxisLabels []string
	ShowGrid    bool
	ValueFormat func(float64) string
	LegendItems []ChartLegendItem
	EmptyMsg    string
	Class       string
	AriaLabel   string
	ID          string
	Attrs       templ.Attributes
}

ChartRenderData bundles the pre-computed values shared between LineChart and AreaChart rendering. Both charts compute identical setup (bounds, ticks, padding, legend positions) — this struct eliminates the duplicated logic.

type CollapsibleSectionProps added in v1.6.0 

type CollapsibleSectionProps struct {
	utils.BaseProps

	// Title is the section heading text.
	Title string

	// TitleTag is the heading element (h1–h6). Default: "h3".
	TitleTag string

	// Collapsed controls whether the section starts collapsed on initial
	// render. Default: false (section is expanded).
	Collapsed bool

	// StorageKey, when non-empty, persists the open/closed state to
	// localStorage under this key. A consumer-side script reads the
	// data-collapsible attribute and toggles accordingly.
	StorageKey string

	// Icon overrides the default chevron. Default: icons.ChevronDown.
	Icon icons.Name
}

CollapsibleSectionProps configures a collapsible section using native <details>/<summary> elements.

func DefaultCollapsibleSectionProps added in v1.6.0 

func DefaultCollapsibleSectionProps() CollapsibleSectionProps

DefaultCollapsibleSectionProps returns sensible defaults.

type ContextMenuItem added in v0.17.0 

type ContextMenuItem struct {
	Text     string
	Href     string // when set, renders an <a>
	Disabled bool
}

ContextMenuItem represents a single item in a context menu.

type ContextMenuProps added in v0.17.0 

type ContextMenuProps struct {
	utils.BaseProps
	Items []ContextMenuItem
}

ContextMenuProps configures a right-click context menu. The menu is positioned at the cursor on right-click within the container element. Items render as links or buttons.

func DefaultContextMenuProps added in v0.17.0 

func DefaultContextMenuProps() ContextMenuProps

DefaultContextMenuProps returns sensible defaults.

type CopyButtonProps added in v0.7.0 

type CopyButtonProps struct {
	utils.BaseProps
	// Text is the string to copy to the clipboard.
	Text string
	// Label is the button text in the idle state. Defaults to "Copy".
	Label string
	// CopiedLabel is the button text shown briefly after a successful copy.
	// Defaults to "Copied!".
	CopiedLabel string
	// Icon optionally renders a leading clipboard icon.
	Icon bool
	// Href, when set, renders an <a> instead of a <button>. The link still
	// copies text to the clipboard on click. Use for copy-as-link patterns.
	Href string
}

CopyButtonProps configures a button that copies text to the clipboard. When the user clicks the button, the text is copied via the Clipboard API, and the button label temporarily changes to CopiedLabel before reverting.

func DefaultCopyButtonProps added in v0.7.0 

func DefaultCopyButtonProps() CopyButtonProps

DefaultCopyButtonProps returns sensible defaults.

type CountBadgeProps added in v0.7.0 

type CountBadgeProps struct {
	utils.BaseProps
	// Count is the number to display in the badge.
	Count int
	// Max is the overflow threshold. When Count > Max, the badge shows
	// "Max+" instead of the raw number (e.g. Max=99, Count=150 → "99+").
	// Defaults to 99. Set to 0 to disable overflow.
	Max int
}

CountBadgeProps configures an icon or element with a notification count badge overlaid in the top-right corner. Use it to show unread counts, pending items, or any numeric indicator on top of a bell icon, avatar, etc.

func DefaultCountBadgeProps added in v0.7.0 

func DefaultCountBadgeProps() CountBadgeProps

DefaultCountBadgeProps returns sensible defaults.

type DataTableColumn added in v0.17.0 

type DataTableColumn struct {
	Label    string
	Sortable bool
	// SortKey is the query-param value representing this column when sorting
	// (e.g. "created_at"). When empty, defaults to the lowercase Label.
	SortKey string
}

DataTableColumn defines a column in a DataTable with sort configuration.

type DataTableProps added in v0.17.0 

type DataTableProps struct {
	utils.BaseProps
	Columns []DataTableColumn
	Rows    []TableRow
	// ActiveSortColumn is the Label of the currently sorted column.
	ActiveSortColumn string
	// ActiveSortDir is the current sort direction of the active column.
	ActiveSortDir SortDirection
	// SortBaseURL is the base URL for sort links (e.g. "/users").
	// Query params for sort/dir are appended automatically.
	SortBaseURL string
	// SortParam is the query-parameter name for the sort column (default: "sort").
	SortParam string
	// DirParam is the query-parameter name for the sort direction (default: "dir").
	DirParam string
	// Pagination, when set, renders below the table. Pass a
	// navigation.Pagination component or any custom pager.
	Pagination templ.Component
	// EmptyState, when set and Rows is empty, replaces the table entirely.
	EmptyState templ.Component
	// Striped, Hover, Bordered — table appearance options (passed to Table).
	Striped  bool
	Hover    bool
	Bordered bool
	// Flush suppresses the table wrapper border — use when nesting inside
	// a Card(CardPaddingNone) to avoid double borders.
	Flush bool
	// CellPadding controls vertical density (passed to Table).
	CellPadding TableCellPadding
	// Caption is an accessibility-only table caption (visually hidden).
	Caption string
}

DataTableProps configures a data table with integrated sort management, optional pagination, and empty-state rendering. It composes Table internally, computing TypedHeaders with correct sort URLs from the current sort state.

Consumers provide column definitions and the current sort state (read from URL query params on the server). DataTable generates the correct sort-toggle links for each header automatically.

func DefaultDataTableProps added in v0.17.0 

func DefaultDataTableProps() DataTableProps

DefaultDataTableProps returns sensible defaults.

type DateFormat added in v1.8.2 

type DateFormat string

DateFormat defines the Go time layout used by DateRange. When empty, DateRangeDefaults.Layout is used. 

const (
	// DateFormatJanuary2006 renders as "January 2006".
	DateFormatJanuary2006 DateFormat = "January 2006"
	// DateFormatJan2006 renders as "Jan 2006".
	DateFormatJan2006 DateFormat = "Jan 2006"
	// DateFormat2006_01 renders as "2006-01".
	DateFormat2006_01 DateFormat = "2006-01"
	// DateFormatJan2_2006 renders as "Jan 2, 2006".
	DateFormatJan2_2006 DateFormat = "Jan 2, 2006"
)

type DateRangeProps added in v1.8.2 

type DateRangeProps struct {
	utils.BaseProps
	Start *time.Time
	End   *time.Time
	// Layout overrides the date format. Defaults to "January 2006".
	Layout DateFormat
	// PresentText overrides the text shown when End is nil. Defaults to "Present".
	PresentText string
	// Separator overrides the range separator. Defaults to "–" (en dash).
	Separator string
}

DateRangeProps configures a date range display.

type DefinitionGridProps added in v0.7.0 

type DefinitionGridProps struct {
	utils.BaseProps
	// Items are the term-detail pairs to render.
	Items []DefinitionItem
	// Cols controls the responsive column count. Defaults to GridCols3 when
	// empty or unknown.
	Cols GridCols
	// ContainerAware, when true, wraps the grid in a @container div and uses
	// container-query variants (@sm:, @lg:) instead of viewport breakpoints.
	// Default false (viewport breakpoints).
	ContainerAware bool
}

DefinitionGridProps configures a responsive grid of definition items. Unlike DefinitionList (which renders a single two-column table), DefinitionGrid lays out each term-detail pair as a card in a responsive grid — ideal for dashboards and settings pages where many key-value pairs need to be scanned side by side.

Set ContainerAware: true to make the column count respond to the parent container's width (CSS @container) instead of the viewport. Useful when DefinitionGrid is placed inside a sidebar, card body, or other constrained layout. See ADR-0018.

func DefaultDefinitionGridProps added in v0.7.0 

func DefaultDefinitionGridProps() DefinitionGridProps

DefaultDefinitionGridProps returns sensible defaults.

type DefinitionItem added in v0.6.0 

type DefinitionItem struct {
	Term   string
	Detail string
	// DetailComponent overrides Detail when set — use for badges, links, or
	// any rich content instead of plain text.
	DetailComponent templ.Component
}

DefinitionItem is one term-detail pair in a DefinitionList.

type DefinitionListProps added in v0.6.0 

type DefinitionListProps struct {
	utils.BaseProps
	Items []DefinitionItem
}

DefinitionListProps configures a two-column term/detail list.

func DefaultDefinitionListProps added in v0.6.0 

func DefaultDefinitionListProps() DefinitionListProps

DefaultDefinitionListProps returns sensible defaults

type DrawerProps added in v0.3.0 

type DrawerProps struct {
	utils.BaseProps

	Title string
	Open  bool
	Side  DrawerSide
	Size  DrawerSize
}

DrawerProps configures a drawer (side panel) component.

func DefaultDrawerProps added in v0.3.0 

func DefaultDrawerProps() DrawerProps

DefaultDrawerProps returns sensible defaults.

type DrawerSide added in v0.3.0 

type DrawerSide string

DrawerSide defines which side the drawer slides in from. 

const (
	DrawerLeft  DrawerSide = "left"
	DrawerRight DrawerSide = "right"
)

type DrawerSize added in v0.3.0 

type DrawerSize string

DrawerSize defines the width of the drawer panel. 

const (
	DrawerSizeSM  DrawerSize = "sm"
	DrawerSizeMD  DrawerSize = "md"
	DrawerSizeLG  DrawerSize = "lg"
	DrawerSizeXL  DrawerSize = "xl"
	DrawerSize2XL DrawerSize = "2xl" // largest available width (max-w-2xl)
)

Drawer size constants. DrawerSize2XL is the largest size (max-w-2xl). 

type DropdownItem struct {
	Text     string
	Href     string
	Icon     icons.Name
	Kind     DropdownItemKind
	External bool
	Disabled bool
	Attrs    templ.Attributes
}

DropdownItem represents a single action in a dropdown menu 

func (item DropdownItem) IsLink() bool

IsLink returns true if the item should render as a link. When Kind is unset, falls back to Href-based discrimination for backward compat. 

type DropdownItemKind string

DropdownItemKind determines how a dropdown item is rendered 

const (
	// DropdownItemLink renders the item as an anchor (<a>) element
	DropdownItemLink DropdownItemKind = "link"
	// DropdownItemButton renders the item as a <button> element
	DropdownItemButton DropdownItemKind = "button"
)
type DropdownPosition string

DropdownPosition defines where the dropdown menu appears 

const (
	DropdownPositionLeft  DropdownPosition = "left"
	DropdownPositionRight DropdownPosition = "right"
)
type DropdownProps struct {
	utils.BaseProps
	Label    string
	Items    []DropdownItem
	Position DropdownPosition
}

DropdownProps configures a dropdown action menu

func DefaultDropdownProps 

func DefaultDropdownProps() DropdownProps

DefaultDropdownProps returns sensible defaults

type EmptyStateProps 

type EmptyStateProps struct {
	utils.BaseProps
	Title string
	// TitleTag overrides the heading element for the title.
	// Defaults to "h3" when empty. Set to "h2" when the empty state
	// is the first heading level after a page <h1>.
	TitleTag    string
	Description string
	Icon        icons.Name
	ActionText  string
	ActionHref  string
	ActionAttrs templ.Attributes
}

EmptyStateProps configures an empty state illustration

func DefaultEmptyStateProps 

func DefaultEmptyStateProps() EmptyStateProps

DefaultEmptyStateProps returns sensible defaults

type ExternalLinkProps added in v1.5.0 

type ExternalLinkProps struct {
	utils.BaseProps

	// Href is the target URL. Passed as a plain string (NOT templ.SafeURL)
	// so that templ's built-in URL sanitizer runs — it blocks javascript:,
	// data:, vbscript: and other dangerous schemes by rewriting them.
	Href string

	// Text is the visible link text. When empty, children are rendered instead.
	Text string

	// ShowIcon controls whether the external-arrow icon (↗) is rendered.
	// Default: true.
	ShowIcon bool
}

ExternalLinkProps configures a safe external link.

func DefaultExternalLinkProps added in v1.5.0 

func DefaultExternalLinkProps() ExternalLinkProps

DefaultExternalLinkProps returns sensible defaults for an external link.

type EyebrowProps added in v1.10.0 

type EyebrowProps struct {
	utils.BaseProps
	Text string
}

EyebrowProps configures a small uppercase overline label rendered above a title. Eyebrows read as status, not decoration: use them to anchor the eye before a headline (e.g. "DNS block · 12:47:03" above a page title).

func DefaultEyebrowProps added in v1.10.0 

func DefaultEyebrowProps() EyebrowProps

DefaultEyebrowProps returns sensible defaults

type GridCols added in v0.7.0 

type GridCols string

GridCols is a typed enum for the responsive column count of a Grid. Unknown values fall back to GridCols3 (graceful degradation — never panic). 

const (
	GridCols1 GridCols = "1"
	GridCols2 GridCols = "2"
	GridCols3 GridCols = "3"
	GridCols4 GridCols = "4"
	GridCols5 GridCols = "5"
	GridCols6 GridCols = "6"
	// GridColsAutoFit uses CSS auto-fit + minmax() instead of fixed breakpoints.
	// The grid responds to container width, not viewport. Requires MinColWidth.
	GridColsAutoFit GridCols = "auto-fit"
	// GridColsDefault is the canonical default (3 columns at the lg breakpoint).
	GridColsDefault GridCols = GridCols3
)

type GridGap added in v0.9.0 

type GridGap string

GridGap is a typed enum for the gap spacing between grid items. Unknown values fall back to GridGapMD (graceful degradation — never panic). 

const (
	GridGapSM GridGap = "sm" // gap-2 (0.5rem)
	GridGapMD GridGap = "md" // gap-4 (1rem) — default
	GridGapLG GridGap = "lg" // gap-6 (1.5rem)
	GridGapXL GridGap = "xl" // gap-8 (2rem)
	// GridGapDefault is the canonical default.
	GridGapDefault GridGap = GridGapMD
)

type GridProps added in v0.7.0 

type GridProps struct {
	utils.BaseProps
	// Cols controls the responsive column count. Defaults to GridCols3 when
	// empty or unknown.
	Cols GridCols
	// Gap controls the spacing between grid items. Defaults to GridGapMD (gap-4).
	Gap GridGap
	// ContainerAware, when true, renders the grid inside an @container
	// wrapper so column counts respond to the container's width instead of
	// the browser viewport. Defaults to true (v2.0). Set to false for
	// viewport-based breakpoints.
	ContainerAware bool
	// MinColWidth sets the minimum column width for auto-fit grids. Used only
	// when Cols is GridColsAutoFit. Generates a CSS auto-fit/minmax template
	// that responds to container width. Example: "190px" produces
	// grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)).
	// Ignored for fixed column counts. When Cols is GridColsAutoFit,
	// ContainerAware is ignored (auto-fit already responds to container
	// width via CSS minmax).
	MinColWidth string
}

GridProps configures a responsive grid layout. Use Grid to lay out cards, stat cards, or any repeating content with consistent responsive breakpoints without repeating the long `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` utility string on every page.

func DefaultGridProps added in v0.7.0 

func DefaultGridProps() GridProps

DefaultGridProps returns sensible defaults (GridCols3).

type HeadingLevel added in v1.8.2 

type HeadingLevel string

HeadingLevel defines the HTML heading element used by SectionHeading. 

const (
	HeadingLevelH1 HeadingLevel = "h1"
	HeadingLevelH2 HeadingLevel = "h2"
	HeadingLevelH3 HeadingLevel = "h3"
	HeadingLevelH4 HeadingLevel = "h4"
	HeadingLevelH5 HeadingLevel = "h5"
	HeadingLevelH6 HeadingLevel = "h6"
)

type HeatmapCell added in v1.6.0 

type HeatmapCell struct {
	// Value is the cell's magnitude.
	Value float64

	// Label is the tooltip text for the cell.
	Label string

	// Href makes the cell a clickable link.
	Href string
}

HeatmapCell represents a single cell in a heatmap grid.

type HeatmapProps added in v1.6.0 

type HeatmapProps struct {
	utils.BaseProps

	// Rows are the data rows. Each row's Cells slice should have the same
	// length as ColumnLabels.
	Rows []HeatmapRow

	// ColumnLabels are the labels for each column (e.g. hour labels).
	ColumnLabels []string

	// Max overrides the auto-computed maximum value (0 = auto from data).
	Max float64

	// ColorVar is the CSS custom property used for cell background color.
	// Default: "--ds-brand".
	ColorVar string

	// CellSize is the Tailwind height class for each cell.
	// Default: "h-5".
	CellSize string

	// ShowValues renders the numeric value inside each cell.
	ShowValues bool

	// ValueFormat formats the value for display. Default: fmt.Sprintf("%.0f", v).
	ValueFormat func(float64) string

	// EmptyMessage is shown when Rows is empty. Default: "No data".
	EmptyMessage string

	// HighlightPeak adds a ring to the cell with the highest value.
	HighlightPeak bool
}

HeatmapProps configures a CSS-based heatmap grid.

func DefaultHeatmapProps added in v1.6.0 

func DefaultHeatmapProps() HeatmapProps

DefaultHeatmapProps returns sensible defaults for a heatmap.

type HeatmapRow added in v1.6.0 

type HeatmapRow struct {
	// Label is the row heading (e.g. "Mon", "general").
	Label string

	// Cells are the per-column values for this row.
	Cells []HeatmapCell
}

HeatmapRow represents a single row in a heatmap grid.

type HoverCardPosition added in v0.17.0 

type HoverCardPosition string

HoverCardPosition defines where the hover card appears relative to the trigger. 

const (
	HoverCardPositionTop    HoverCardPosition = "top"
	HoverCardPositionBottom HoverCardPosition = "bottom"
	HoverCardPositionStart  HoverCardPosition = "start"
	HoverCardPositionEnd    HoverCardPosition = "end"
)

type HoverCardProps added in v0.17.0 

type HoverCardProps struct {
	utils.BaseProps
	Content  templ.Component
	Position HoverCardPosition
}

HoverCardProps configures a hover-activated card with rich content. The card appears on hover and focus, using pure CSS (no JavaScript). Accessible: the card content is linked to the trigger via aria-describedby. This is the reference implementation for the CSS-only overlay pattern — see ADR-0017 for the broader Popover API migration strategy.

func DefaultHoverCardProps added in v0.17.0 

func DefaultHoverCardProps() HoverCardProps

DefaultHoverCardProps returns sensible defaults.

type ImageProps added in v0.7.0 

type ImageProps struct {
	utils.BaseProps
	// Src is the primary image URL.
	Src string
	// Alt text for accessibility. Required for non-decorative images.
	Alt string
	// SrcSet defines multiple image sources for responsive delivery.
	// Example: "photo-1x.jpg 1x, photo-2x.jpg 2x" or
	// "photo-480w.jpg 480w, photo-800w.jpg 800w".
	SrcSet string
	// Sizes defines the intended display width at different breakpoints.
	// Example: "(max-width: 600px) 480px, 800px".
	// Pair with a width-descriptor srcset for responsive images.
	Sizes string
	// Width in CSS pixels. When set, the img tag includes a width attribute
	// and helps prevent layout shift (CLS).
	Width int
	// Height in CSS pixels. When set, the img tag includes a height attribute.
	Height int
	// FallbackSrc, when non-empty, is used if Src fails to load. Handled via
	// a CSP-safe event-delegation script — no inline onerror handler.
	FallbackSrc string
	// Lazy controls the loading attribute. When true (default), uses
	// loading="lazy". Set to false for above-the-fold images.
	Lazy bool
	// Rounded, when true, adds rounded-full for circular images (avatars, icons).
	// Defaults to false (rounded-md).
	Rounded bool
}

ImageProps configures an <img> element with lazy loading, aspect-ratio dimensions, and optional fallback source. The fallback is handled via a CSP-safe singleton script (no inline onerror handler) that swaps the src when the original fails to load.

func DefaultImageProps added in v0.7.0 

func DefaultImageProps() ImageProps

DefaultImageProps returns sensible defaults.

type LineChartProps added in v1.7.0 

type LineChartProps struct {
	utils.BaseProps

	// Series is the data to plot. Each series becomes one line.
	Series []LineChartSeries

	// XAxisLabels are category labels along the X-axis (e.g. month names).
	// If empty, no X-axis labels are rendered.
	XAxisLabels []string

	// Width is the SVG canvas width in pixels. Default: 600.
	Width int

	// Height is the SVG canvas height in pixels. Default: 300.
	Height int

	// Padding controls the inset around the plot area. Default: DefaultChartPadding().
	Padding ChartPadding

	// Min overrides the auto-computed Y-axis minimum (nil = auto from data).
	Min *float64

	// Max overrides the auto-computed Y-axis maximum (nil = auto from data).
	Max *float64

	// ShowGrid renders dashed horizontal gridlines at each Y tick. Default: true.
	ShowGrid bool

	// ShowDots renders a circle at each data point. Default: true.
	ShowDots bool

	// ShowLegend renders a color-swatch legend above the chart when there
	// are 2+ series. Default: true.
	ShowLegend bool

	// Style controls whether lines are straight (Linear) or curved (Smooth).
	// Default: LineChartStyleLinear.
	Style LineChartStyle

	// ValueFormat formats Y-axis tick labels. Default: FormatTickValue.
	ValueFormat func(float64) string

	// EmptyMessage is shown when Series is empty. Default: "No data".
	EmptyMessage string
}

LineChartProps configures a pure-SVG line chart with axes, gridlines, multi-series support, and a legend. Zero JavaScript — all rendering is server-side SVG. Dark-mode aware via Tailwind dark: variants on SVG elements.

func DefaultLineChartProps added in v1.7.0 

func DefaultLineChartProps() LineChartProps

DefaultLineChartProps returns sensible defaults for a line chart.

type LineChartSeries added in v1.7.0 

type LineChartSeries struct {
	// Name is the series label shown in the legend.
	Name string

	// Values are the Y-axis data points.
	Values []float64

	// Color overrides the palette color with a Tailwind text-* class
	// (e.g. "text-emerald-600 dark:text-emerald-400"). Empty = palette by index.
	Color string

	// StrokeWidth is the line thickness. Default: 2.
	StrokeWidth float64

	// Dashed renders the line with a dashed pattern.
	Dashed bool
}

LineChartSeries is a single data series in a line chart.

type LineChartStyle added in v1.7.0 

type LineChartStyle string

LineChartStyle controls how series lines are drawn. 

const (
	// LineChartStyleLinear connects data points with straight line segments.
	LineChartStyleLinear LineChartStyle = "linear"
	// LineChartStyleSmooth connects data points with a Catmull-Rom spline curve.
	LineChartStyleSmooth LineChartStyle = "smooth"
)

type ListNoteProps added in v0.6.0 

type ListNoteProps struct {
	utils.BaseProps
	// Shown is the number of items currently rendered.
	Shown int
	// Total is the unfiltered/cap-exceeding match count.
	Total int
}

ListNoteProps configures a "Showing N of M" truncation notice.

type ModalProps 

type ModalProps struct {
	utils.BaseProps

	Title string
	Open  bool
	Size  ModalSize
}

ModalProps configures a modal dialog.

func DefaultModalProps 

func DefaultModalProps() ModalProps

DefaultModalProps returns sensible defaults.

type ModalSize 

type ModalSize string

ModalSize defines the width of a modal dialog. 

const (
	ModalSizeSM  ModalSize = "sm"
	ModalSizeMD  ModalSize = "md"
	ModalSizeLG  ModalSize = "lg"
	ModalSizeXL  ModalSize = "xl"
	ModalSize2XL ModalSize = "2xl" // largest available width (max-w-4xl)
)

Modal size constants. ModalSize2XL is the largest size (max-w-4xl).

type OverlayKind added in v0.7.0 

type OverlayKind string

OverlayKind identifies whether an overlay is a Modal or a Drawer. 

const (
	// OverlayModal is the kind for Modal overlays.
	OverlayModal OverlayKind = "modal"
	// OverlayDrawer is the kind for Drawer overlays.
	OverlayDrawer OverlayKind = "drawer"
)

type PageHeaderProps added in v0.6.0 

type PageHeaderProps struct {
	utils.BaseProps
	Title string
	// Subtitle renders below the title in muted text.
	Subtitle string
	// Breadcrumb renders above the title (optional). Pass a navigation.Breadcrumbs
	// component or any custom breadcrumb markup.
	Breadcrumb templ.Component
	// Action renders on the right side of the title row (optional). Use for
	// primary buttons, back links, or status badges.
	Action templ.Component
}

PageHeaderProps configures a page-level header with title, optional subtitle, and optional breadcrumb/action slots.

func DefaultPageHeaderProps added in v0.6.0 

func DefaultPageHeaderProps() PageHeaderProps

DefaultPageHeaderProps returns sensible defaults

type PieChartLabelMode added in v1.7.0 

type PieChartLabelMode string

PieChartLabelMode controls where slice labels are rendered. 

const (
	// PieChartLabelExternal renders labels outside the pie with leader lines.
	PieChartLabelExternal PieChartLabelMode = "external"
	// PieChartLabelNone suppresses labels (use the legend instead).
	PieChartLabelNone PieChartLabelMode = "none"
)

type PieChartProps added in v1.7.0 

type PieChartProps struct {
	utils.BaseProps

	// Slices is the data to plot.
	Slices []PieChartSlice

	// Width is the SVG canvas width in pixels. Default: 400.
	Width int

	// Height is the SVG canvas height in pixels. Default: 300.
	Height int

	// Donut renders a donut (ring) chart with an inner hole. Default: false (full pie).
	Donut bool

	// InnerRadius controls the donut hole size as a fraction of the radius
	// (0.0–1.0). Default: 0.6.
	InnerRadius float64

	// ShowLabels renders slice labels outside the pie. Default: true.
	ShowLabels bool

	// LabelMode controls label positioning. Default: PieChartLabelExternal.
	LabelMode PieChartLabelMode

	// ShowLegend renders a color-swatch legend below the chart. Default: true.
	ShowLegend bool

	// CenterLabel is text rendered in the center of a donut chart (e.g. "128GB").
	CenterLabel string

	// EmptyMessage is shown when Slices is empty. Default: "No data".
	EmptyMessage string
}

PieChartProps configures a pure-SVG pie or donut chart. Zero JavaScript — all rendering is server-side SVG using arc paths. Dark-mode aware via Tailwind dark: variants on SVG elements.

func DefaultDonutChartProps added in v1.7.0 

func DefaultDonutChartProps() PieChartProps

DefaultDonutChartProps returns sensible defaults for a donut chart.

func DefaultPieChartProps added in v1.7.0 

func DefaultPieChartProps() PieChartProps

DefaultPieChartProps returns sensible defaults for a pie chart.

type PieChartSlice added in v1.7.0 

type PieChartSlice struct {
	// Label is the slice's category name.
	Label string

	// Value is the slice's magnitude. Must be non-negative.
	Value float64

	// Color overrides the palette color with a Tailwind text-* class
	// (e.g. "text-emerald-600 dark:text-emerald-400"). Empty = palette by index.
	Color string
}

PieChartSlice represents a single slice in a pie or donut chart.

type Point added in v1.7.0 

type Point struct {
	X, Y float64
}

Point is a coordinate pair in SVG user space.

func ScalePoints added in v1.7.0 

func ScalePoints(values []float64, width, height int, minVal, maxVal float64) []Point

ScalePoints maps data values to SVG point coordinates within a plot area of the given width and height. The X coordinate is distributed evenly across the value count; the Y coordinate is scaled from minVal..maxVal and inverted (SVG Y increases downward). If maxVal <= minVal the range is padded by 1 to avoid division by zero. The returned points are relative to the plot area origin (0,0); the caller offsets them by the chart padding.

type PopoverPosition added in v0.15.0 

type PopoverPosition string

PopoverPosition defines where the popover content appears relative to the trigger. 

const (
	PopoverPositionTop    PopoverPosition = "top"
	PopoverPositionBottom PopoverPosition = "bottom"
	PopoverPositionLeft   PopoverPosition = "left"
	PopoverPositionRight  PopoverPosition = "right"
)

type PopoverProps added in v0.15.0 

type PopoverProps struct {
	utils.BaseProps
	TriggerText string
	Position    PopoverPosition
}

PopoverProps configures a popover component.

A popover is a floating panel triggered by a button click. It displays arbitrary content (unlike Dropdown which renders menu items) and dismisses on Escape, click-outside, or when the trigger is toggled again.

func DefaultPopoverProps added in v0.15.0 

func DefaultPopoverProps() PopoverProps

DefaultPopoverProps returns sensible defaults.

type RelativeTimeProps added in v0.7.0 

type RelativeTimeProps struct {
	utils.BaseProps
	// Time is the timestamp to display relative to now.
	Time time.Time
	// Title, when non-empty, overrides the default title (absolute time shown
	// on hover). Set to "" to use the formatted absolute timestamp.
	Title string
	// AutoRefresh defaults to true — the component injects a singleton script
	// that uses the native Intl.RelativeTimeFormat API to live-update the text
	// every 30 seconds. Also listens to htmx:afterSettle so newly-swapped
	// <time> elements are formatted immediately. This is progressive enhancement:
	// the server-rendered text is correct without JS; the script just keeps it
	// fresh. Set to false for static contexts (PDF, email, SEO-only).
	AutoRefresh bool
}

RelativeTimeProps configures a human-readable relative timestamp. The server renders the initial relative string ("2 hours ago"); the machine-readable datetime attribute is always present for screen readers and search engines.

func DefaultRelativeTimeProps added in v0.7.0 

func DefaultRelativeTimeProps() RelativeTimeProps

DefaultRelativeTimeProps returns sensible defaults. Time defaults to now, AutoRefresh defaults to true (live-updating via Intl.RelativeTimeFormat).

type ScrollbackLine added in v1.10.0 

type ScrollbackLine struct {
	Timestamp string
	Tag       string
	Text      string
	Tone      ScrollbackTone
}

ScrollbackLine is one entry in a Scrollback. Timestamp is preformatted by the caller (e.g. "12:47:03.184"); Tag is a short column label (e.g. "query", "match"); Text is the line body.

type ScrollbackProps added in v1.10.0 

type ScrollbackProps struct {
	utils.BaseProps
	// Lines renders top-down in the given order. Empty slice renders nothing.
	Lines []ScrollbackLine
	// Stagger animates lines in sequentially (pure CSS, reduced-motion safe).
	// DefaultScrollbackProps enables it; the zero value renders instantly.
	Stagger bool
}

ScrollbackProps configures a terminal-style log block.

func DefaultScrollbackProps added in v1.10.0 

func DefaultScrollbackProps() ScrollbackProps

DefaultScrollbackProps returns sensible defaults.

type ScrollbackTone added in v1.10.0 

type ScrollbackTone string

ScrollbackTone colors a scrollback line's tag column. 

const (
	ScrollbackToneNeutral ScrollbackTone = "neutral"
	ScrollbackToneInfo    ScrollbackTone = "info"
	ScrollbackToneSuccess ScrollbackTone = "success"
	ScrollbackToneWarning ScrollbackTone = "warning"
	ScrollbackToneDanger  ScrollbackTone = "danger"
)

type SectionHeadingProps added in v1.8.2 

type SectionHeadingProps struct {
	utils.BaseProps
	Title    string
	Level    HeadingLevel
	Align    TextAlign
	SubTitle string
}

SectionHeadingProps configures a section-level heading with typed heading level and alignment.

type SimpleCardProps 

type SimpleCardProps struct {
	utils.BaseProps
	Padding CardPadding
	// Body, when set, overrides children — same pattern as CardProps.Body.
	Body templ.Component
}

SimpleCardProps configures a simple card without header/footer

func DefaultSimpleCardProps 

func DefaultSimpleCardProps() SimpleCardProps

DefaultSimpleCardProps returns sensible defaults

type SortDirection added in v0.8.0 

type SortDirection string

SortDirection defines the sort order for a table column. 

const (
	SortNone SortDirection = ""
	SortAsc  SortDirection = "asc"
	SortDesc SortDirection = "desc"
)

type SparklineProps added in v1.5.0 

type SparklineProps struct {
	utils.BaseProps

	// Values are the data points to plot. Fewer than 2 points renders nothing.
	Values []float64

	// Width is the SVG canvas width in pixels. Default: 120.
	Width int

	// Height is the SVG canvas height in pixels. Default: sparklineDefaultHeight.
	Height int

	// StrokeWidth controls the line thickness. Default: 1.5.
	StrokeWidth float64

	// Filled renders a filled area beneath the line (default: false).
	Filled bool

	// Min overrides the auto-computed minimum value (nil = auto from data).
	Min *float64

	// Max overrides the auto-computed maximum value (nil = auto from data).
	Max *float64
}

SparklineProps configures a tiny inline SVG line chart for trend visualization.

func DefaultSparklineProps added in v1.5.0 

func DefaultSparklineProps() SparklineProps

DefaultSparklineProps returns sensible defaults for a sparkline.

type StatCardProps 

type StatCardProps struct {
	utils.BaseProps
	Value  string
	Label  string
	Change string
	Trend  TrendDirection
	// Icon optionally renders a leading icon tile (e.g. icons.Users).
	Icon icons.Name
	// Href, when non-empty, wraps the whole card in an <a> so the card acts
	// as a clickable navigation/filter link. Use this for dashboard stat cards
	// that drill down into a filtered view.
	Href string
	// HxGet, when set, adds hx-get to the card for HTMX-driven updates.
	// Mutually independent of Href — Href navigates, HxGet fetches partial HTML.
	HxGet string
	// HxTarget specifies the hx-target attribute (CSS selector for the swap target).
	HxTarget string
	// HxSwap specifies the hx-swap attribute (e.g. htmx.SwapInnerHTML, htmx.SwapOuterHTML).
	HxSwap htmx.SwapStyle
	// ValueID, when non-empty, sets the id attribute on the value <dd> node.
	// Use on live-updating dashboards whose scripts address the value
	// directly instead of querying the card's internal structure — so a
	// markup refactor inside the card cannot break the script's selector.
	ValueID string
}

StatCardProps configures a dashboard stat card

func DefaultStatCardProps 

func DefaultStatCardProps() StatCardProps

DefaultStatCardProps returns sensible defaults

type Tab 

type Tab struct {
	ID      string
	Label   string
	Content templ.Component
}

Tab represents a single tab panel

type TableCell 

type TableCell struct {
	Text    string
	Content templ.Component
}

TableCell represents a single cell in a table row. When Content is set, it takes priority over Text for rendering.

type TableCellPadding added in v0.16.0 

type TableCellPadding string

TableCellPadding controls the vertical density of header and body cells. 

const (
	// TableCellPaddingComfortable is the default cell padding (px-4 py-3) —
	// suitable for general-purpose tables and content pages.
	TableCellPaddingComfortable TableCellPadding = "comfortable"
	// TableCellPaddingCompact reduces vertical padding (px-4 py-2) for
	// data-heavy dashboards and admin panels where rows should feel tighter.
	TableCellPaddingCompact TableCellPadding = "compact"
)

type TableHeader added in v0.8.0 

type TableHeader struct {
	Label         string
	Sortable      bool
	SortDirection SortDirection
	Href          string // When set with Sortable=true, renders as <a> for server-side sorting
}

TableHeader defines a typed column header with optional sort capabilities. When TypedHeaders is set on TableProps, it takes precedence over Headers.

type TableProps 

type TableProps struct {
	utils.BaseProps
	Caption      string
	Headers      []string
	TypedHeaders []TableHeader // When set, takes precedence over Headers for sortable column rendering
	Rows         []TableRow
	Striped      bool
	Hover        bool
	Bordered     bool
	// Flush, when true, suppresses the wrapper div's border and rounded corners.
	// Use this when the table is nested inside a Card(CardPaddingNone) to avoid
	// a double border — the card provides the outer border, and the table sits
	// flush against it. The overflow-x-auto scroll wrapper is always retained.
	Flush bool
	// CellPadding controls the vertical density of header and body cells.
	// Defaults to TableCellPaddingComfortable (px-4 py-3). Set to
	// TableCellPaddingCompact (px-4 py-2) for data-heavy dashboards and admin
	// panels where rows should feel tighter.
	CellPadding TableCellPadding
	// LazyRows, when true, applies content-visibility: auto to body rows.
	// The browser skips rendering off-screen rows, giving 2-5x faster initial
	// render for tables with 100+ rows. Uses contain-intrinsic-size so the
	// scrollbar stays accurate. Recommended for large data tables.
	LazyRows bool
	// Body, when set, overrides Rows for the <tbody> content. The component
	// should render <tr> elements directly — ideal for templ loops where each
	// row needs custom cell rendering:
	//
	//	@display.Table(display.TableProps{
	//	    Headers: headers,
	//	    Body:    messageRows(messages),
	//	})
	//	templ messageRows(messages []Message) {
	//	    for _, m := range messages {
	//	        <tr><td>{ m.Text }</td><td>{ m.Author }</td></tr>
	//	    }
	//	}
	Body templ.Component
	// BodyID, when non-empty, sets the id attribute on the <tbody> element.
	// Use on live-updating dashboards whose scripts swap rows without
	// querying the table's internal structure — so a markup refactor inside
	// the table cannot break the script's selector.
	BodyID string
}

TableProps configures a data table

func DefaultTableProps 

func DefaultTableProps() TableProps

DefaultTableProps returns sensible defaults

type TableRow 

type TableRow struct {
	Cells []TableCell
	// Href, when non-empty, makes the entire row clickable. The row gets
	// data-tc-row-href, role="link", tabindex="0", and cursor-pointer.
	Href string
}

TableRow represents a single row in a table. When Href is set, the row becomes clickable (navigates on click/Enter). A CSP-safe singleton script handles click delegation and keyboard navigation. Clicks on interactive elements inside the row (links, buttons) are not hijacked.

func SimpleTableRow 

func SimpleTableRow(values ...string) TableRow

SimpleTableRow creates a row from string values for convenience

type TabsProps 

type TabsProps struct {
	utils.BaseProps
	Tabs        []Tab
	ActiveTabID string
	Variant     TabsVariant
	ClientSide  bool
}

TabsProps configures a tab component

func DefaultTabsProps 

func DefaultTabsProps() TabsProps

DefaultTabsProps returns sensible defaults

type TabsVariant 

type TabsVariant string

TabsVariant defines the visual style of tabs 

const (
	TabsDefault TabsVariant = "default"
	TabsPills   TabsVariant = "pills"
)

type TextAlign added in v1.8.2 

type TextAlign string

TextAlign defines the horizontal alignment of a SectionHeading. 

const (
	TextAlignLeft   TextAlign = "left"
	TextAlignCenter TextAlign = "center"
	TextAlignRight  TextAlign = "right"
)

type TooltipPosition 

type TooltipPosition string

TooltipPosition defines where the tooltip appears relative to the trigger 

const (
	TooltipPositionTop    TooltipPosition = "top"
	TooltipPositionBottom TooltipPosition = "bottom"
	TooltipPositionLeft   TooltipPosition = "left"
	TooltipPositionRight  TooltipPosition = "right"
)

type TooltipProps 

type TooltipProps struct {
	utils.BaseProps
	Text     string
	Position TooltipPosition
}

TooltipProps configures a tooltip component.

The tooltip shows on :hover and :focus-within via pure CSS. A tiny singleton script (tooltipAriaScriptComponent) propagates aria-describedby from the non-focusable wrapper <div> to the first focusable child so screen readers announce the tooltip text on focus.

func DefaultTooltipProps 

func DefaultTooltipProps() TooltipProps

DefaultTooltipProps returns sensible defaults

type TrendDirection 

type TrendDirection string

TrendDirection represents the direction of a stat change 

const (
	TrendUp   TrendDirection = "up"
	TrendDown TrendDirection = "down"
	TrendWarn TrendDirection = "warn"
	TrendNone TrendDirection = "none"
)

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.