Live Demo
templ-components
97 components across 9 packages — all interactive, all rendered server-side.
# Cards
Standard Card
With title, subtitle, and body
This is a standard card with header and content.
SimpleCard — no header, just content.
# Stat Cards
# Badges
# Buttons
# Avatars
# Modal (native dialog)
# Drawer (native dialog)
# Dropdown
# Tooltip
# Popover
# Accordion (native details)
What is templ-components?
How do I install it?
Is it production-ready?
# Tabs
# Tabs (Pills variant)
# Table
| Name ↑ | Role | |
|---|---|---|
| Alice Smith | alice@example.com | Admin |
| Bob Jones | bob@example.com | User |
# Table in Card (Flush + Compact)
Recent Users
| Name | Status | |
|---|---|---|
| Alice Smith | alice@example.com | Active |
| Bob Jones | bob@example.com | Invited |
# DataTable (sort + pagination)
# PageHeader
User Settings
Manage your account preferences and security options
# Definition List
- User ID
- usr_01JXEXAMPLE
- 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%
# Empty States
No data to display.
# CopyButton
# RelativeTime
# CountBadge
# ListNote
# Image
# HoverCard
Hover details
Shows on hover or focus.
Right-click the area below:
# Carousel
# Alerts
Success
Operation completed.
Error
Something went wrong.
Warning
Check your input.
Info
Here is some information.
# Toast (auto-generated ID, auto-dismiss)
Toasts render into ToastContainer. Each auto-dismisses after 5s.
# Inline Feedback
# Spinners
# Progress Bars
# Step Indicator
# Skeletons
# Skeleton Card Grid
# Form Controls
Tell us about yourself.
- Germany
- Austria
- Switzerland
- United States
# Calendar
# ValidationSummary
# Inline Form (Filter Bar)
# HTMX LoadingIndicator
Global HTMX loading overlay (shows during any htmx request):
# HTMX InlineLoadingOverlay
Per-target loading indicator (shown via hx-indicator):
# HTMX LoadingButton
Button swaps text during htmx request:
Saving... Save changes# HTMX ConfirmDelete
# HTMX CSRFToken
Renders a hidden CSRF input field:
# HTMX SwapOOB
Out-of-band swap element (processed by HTMX after a response):
# HTMX GlobalErrorHandling
Wires up htmx:responseError and htmx:beforeOnError events:
# NotFound404
# ErrorPage
The resource was not found
Suggested fix: Check the URL or return to the homepage.
# ErrorAlert (by family)
Invalid Input
rejectionThe email address format is invalid.
Enter a valid email address.
Version Conflict
conflictSomeone else modified this resource.
Refresh and try again.
Temporary Error
transientA temporary error occurred.
Wait a moment and retry.
Data Corrupted
corruptionConfiguration file is unreadable.
Service Unavailable
infrastructureThe service is currently down.
# ErrorDetail (with context + cause chain)
data.parse_failedcorruptionParse Failed
config.yaml contains invalid syntax at line 42.
Suggested fix: Check the YAML syntax.
| file | config.yaml |
|---|---|
| line | 42 |
db.timeouttransientDatabase Timeout
Query took too long.
Caused by