display

package
v0.18.1 Latest Latest
Warning

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

 Go to latest Published: Jul 18, 2026 License: MIT Imports: 14 Imported by: 4

Documentation

Overview

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

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

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

Index

Examples

Constants

View Source 
const CountBadgeDefaultMax = 99

CountBadgeDefaultMax is the standard overflow threshold (99).

Variables

This section is empty.

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 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 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 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. A CSP-safe singleton script handles the positioning, Escape-to-dismiss, and click-outside-close. 

@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 = "npm install 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 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 

@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 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, ContainerResponsive: 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 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 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 Popover added in v0.15.0 

func Popover(props PopoverProps) templ.Component

Popover renders a button-triggered floating panel with arbitrary content. 

@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 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 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-activated tooltip 

@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 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 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
	// 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
}

CardProps configures a card container

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 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 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
}

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.

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)
	DrawerFull    DrawerSize = "full" // Deprecated: use DrawerSize2XL
)

Drawer size constants. DrawerSize2XL is the largest size (max-w-2xl); DrawerFull is a deprecated alias kept for backward compatibility. 

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
	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 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
	// ContainerResponsive, when true, renders the grid inside an @container
	// wrapper so column counts respond to the container's width instead of
	// the browser viewport. Useful for grids placed in sidebars, cards, or
	// other constrained layouts. Defaults to false (viewport breakpoints).
	ContainerResponsive 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,
	// ContainerResponsive 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 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.

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 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)
	ModalSizeFull ModalSize = "full" // Deprecated: use ModalSize2XL
)

Modal size constants. ModalSize2XL is the largest size (max-w-4xl); ModalSizeFull is a deprecated alias kept for backward compatibility.

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 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 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 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
}

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
}

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 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

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.