display

func Accordion ¶

func Accordion(props AccordionProps) templ.Component

Accordion renders a collapsible accordion with accessible markup

@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 Badge ¶

func Badge(props BadgeProps) templ.Component

Badge renders a compact status label

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

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
}

Output:

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

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

Output:

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 that slides in from the left or right

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

The panel body is intentionally not shared with Modal: the transition (translate-x) and positioning classes differ, with conditional templ.KV classes inline. overlayShell already owns the shared a11y shell + JS.

func Dropdown ¶

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

func Modal(props ModalProps) templ.Component

Modal renders an accessible modal dialog with backdrop

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

The panel body is intentionally not shared with Drawer: the transition (scale/opacity) and sizing classes differ, with conditional templ.KV classes inline. overlayShell already owns the shared a11y shell + JS.

func PageHeader ¶ added in v0.6.0

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

@display.StatCard(display.StatCardProps{Label: "Users", Value: "1,204", Icon: icons.Users})

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

Output:

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"),
   },
})

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