Skip to main content
tc

Display

Cards, tables, badges, avatars, charts, kanban, carousel.

# Cards

Standard Card

Sharp corners by default

This is a standard card with header and content.

Squircle Card

iOS-style continuous corners

Composed with Class: "rounded-xl tc-squircle". Browsers without CSS corner-shape render plain rounded corners.

SimpleCard — no header, just content.

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

display.Card(display.CardProps{
	Title:     "Squircle",
	BaseProps: utils.BaseProps{Class: "rounded-xl tc-squircle"},
}) { ... }

# Stat Cards

Users
1,204 Increased by 12%
Revenue
$45.2K Decreased by -3%
Uptime
99.9%
Active
42

# Stat Card Tones

Users
1,204
Uptime
99.9%
Degraded
3 Increased by +2
Failures
7 Increased by +5
Custom
12
Go 
display.StatCard(display.StatCardProps{Label: "Uptime", Icon: icons.CheckCircle, Tone: display.StatToneGreen})

# Badges

DefaultSuccessErrorWarningInfoPill Dot
healthy degraded down pending active

# Buttons

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

# Avatars

John Doe
Alice Brown
Charlie Day

# Modal (native dialog)

Demo Modal

This modal uses the native <dialog> element with showModal(). Press Escape or click backdrop to close.
Go 
@display.Modal(display.ModalProps{Title: "Confirm", Size: display.ModalSizeMD}) {
	<p>Are you sure?</p>
}

# Drawer (native dialog)

Demo Drawer

Drawer slides in from the side using native <dialog>.

# Command Palette (⌘K)

Click the button or press ⌘K / Ctrl+K. Type to filter; arrow keys move; Enter selects.

Demo pages
Display components this pageForm controls Kanban board Wire transports
Elsewhere
Documentation externalLive demo home
No results found.

# Dropdown

# Tooltip

# Popover

# Accordion (native details)

What is templ-components?
How do I install it?
Is it production-ready?

# Tabs

OverviewSettingsActivity

# Tabs (Pills variant)

FirstSecond

# Table

Name ↑EmailRole
Alice Smithalice@example.comAdmin
Bob Jonesbob@example.comUser
Go 
display.Table(display.TableProps{
	Headers: []string{"Name", "Email", "Role"},
	Rows: []display.TableRow{
		display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
	},
	Striped: true,
	Hover:   true,
})

# Table in Card (Flush + Compact)

Recent Users

NameEmailStatus
Alice Smithalice@example.comActive
Bob Jonesbob@example.comInvited

# DataTable (sort + pagination)

Name ↑Email
Alicealice@example.com
Bobbob@example.com

# PageHeader

User Settings

Manage your account preferences and security options

# SectionHeading + DateRange

Experience

SectionHeading — configurable h1–h6 level, alignment, subtitle

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

# Definition List

User ID
usr_01JXEXAMPLE
Email
admin@example.com
Plan
Enterprise

# Definition Grid

CPU
42%
Memory
8.2 GB
Disk
156 GB
Uptime
99.9%
Requests
1.2K/s
Latency
12ms

# Grid + Container Query Grid

Normal grid
42
Responsive
12ms
To viewport
99.9%

Container-responsive (resize this box):

Requests/s
42
Latency
12ms
Uptime
99.9%
Go 
display.Grid(display.GridProps{Cols: display.GridCols3, Gap: display.GridGapLG}) {
	for _, u := range users {
		@display.Card(display.CardProps{Title: u.Name}) { <p>{ u.Email }</p> }
	}
}

# Fluid Typography (container query units)

Container-aware metric

Revenue scales with this card's width:

$4.2M

Heading in a narrow container

Text shrinks smoothly as the container narrows via cqi units.

# Empty States

No users found

Try adjusting your search or filters.

Add user

No data to display.

# CopyButton

# RelativeTime

2 hours ago: 1 day ago:

# CountBadge

# ListNote

Showing 50 of 127. Narrow your search to see more.

# Eyebrow & Scrollback

Deploy #142 · production

Build pipeline

# Image

Demo Rounded

# HoverCard

# ContextMenu

Right-click the area below:

Right-click here for context menu

# Sparklines & Bar Charts

Message Trend

+47%

Top Channels

# SVG Charts (Line, Pie, Area)

Revenue Trend

10 20 30 40 50 60 70 80 MonTueWedThuFriSatSun

Revenue vs Expenses

Active Users

Traffic Sources

Storage Usage

View on GitHub templ docs

# Collapsible Sections

Advanced Settings

These settings are open by default. Users can collapse this section to focus on the overview.

Debug Information

Version: v1.21.0 Build: 2026-10-14T03:10:06Z

# Heatmap

Weekly Activity Heatmap