Getting Started

Learn how to install and use PopUI in your projects.

Welcome to PopUI! This guide will help you get started with installing and using PopUI in your projects.

Installation

To install PopUI, you can use the following command:

go get github.com/invopop/popui/go

App

The main application layout component with header, nav, aside, main, and footer sections. Use this as the base for all popui applications, and extend as needed.

Basic App

Simple app with a header, main content area, and footer.

12345678910111213141516171819202122232425262728293031
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ AppExample() {
	@popui.App(props.App{Title: "Application"}) {
		@popui.Header(props.Header{
			Breadcrumbs: []props.Breadcrumb{{Label: "Example"}},
		}) {
			@popui.Button(props.Button{Variant: "primary"}) {
				@icons.Add()
				<span>New Item</span>
			}
		}
		@popui.Main(props.Main{Center: true}) {
			@popui.Article() {
				<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl">
					This is where the page contents goes.
				</div>
			}
		}
		@popui.Footer() {
			&copy; 2025 Invopop Inc.
		}
	}
}

Configuration App

Simple app with only a basic content area.

123456789101112131415161718192021222324252627282930
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AppConfigExample() {
	@popui.App(props.App{Title: "Configure"}) {
		@popui.Main(props.Main{Center: true}) {
			@popui.Article() {
				@popui.Fieldset() {
					@popui.Input(props.Input{
						ID:          "name-for-app-config",
						Label:       "Name",
						Type:        "text",
						Placeholder: "Your Name",
					})
					@popui.Input(props.Input{
						ID:          "email-for-app-config",
						Label:       "Email",
						Type:        "email",
						Placeholder: "email@example.com",
					})
				}
			}
		}
	}
}

App Popup

App layout with a header and closer button..

1234567891011121314151617181920212223242526272829303132333435363738394041424344
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ AppPopupExample() {
	@popui.App(props.App{Title: "Application Popup"}) {
		@popui.Header(props.Header{
			Title: appPopupTitle(),
		}) {
			@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
				Add New
			}
		}
		@popui.Main() {
			@popui.Article(props.Article{FullWidth: true}) {
				<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl">
					This is where the page contents goes.
				</div>
			}
		}
		@popui.Footer() {
			@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
				Next
			}
		}
	}
}

templ appPopupTitle() {
	@popui.Button(props.Button{
		Variant: props.ButtonVariantTransparent,
		Class:   "p-2",
	}) {
		@icons.Close()
	}
	<span>
		Popup Example
	</span>
}

App with Sidebar Navigation

App layout that includes a sidebar navigation menu alongside the main content area.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ AppWithSidebarExample() {
	@popui.App(props.App{Title: "Application With Sidebar"}) {
		@popui.Sidebar() {
			@popui.SidebarHeader() {
				@popui.InvopopLogoSquare()
				Sidebar
			}
			@popui.SidebarContent() {
				@popui.SidebarSection(props.SidebarSection{Title: "Section 1"}) {
					@popui.SidebarItem(props.SidebarItem{Href: "#", Selected: true}) {
						Overview
					}
					@popui.SidebarItem(props.SidebarItem{Href: "#"}) {
						Dashboard
					}
				}
			}
		}
		@popui.Header(props.Header{
			Breadcrumbs: []props.Breadcrumb{{Label: "Example"}},
		}) {
			@popui.Button(props.Button{Variant: "primary"}) {
				@icons.Add()
				<span>New Item</span>
			}
		}
		@popui.Main() {
			@popui.Article(props.Article{FullWidth: true}) {
				<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl">
					This is where the page contents goes.
				</div>
			}
		}
		@popui.Footer() {
			&copy; 2025 Invopop Inc.
		}
	}
}

App with table and pagination

App layout that includes a full width table and pagination in the main content area.

Invoice ID	Customer	Amount	Status
INV-001	Acme Corp	$1,234.56	Paid
INV-002	Tech Solutions	$987.65	Pending
INV-003	Global Inc	$2,345.67	Paid

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ AppWithTableExample() {
	@popui.App(props.App{Title: "Application With Table"}) {
		@popui.Header(props.Header{
			Breadcrumbs: []props.Breadcrumb{{Label: "Example"}},
		}) {
			@popui.Button(props.Button{Variant: "primary"}) {
				@icons.Add()
				<span>New Item</span>
			}
		}
		@popui.Main() {
			@popui.Table() {
				<thead>
					<tr>
						<th>Invoice ID</th>
						<th>Customer</th>
						<th>Amount</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>INV-001</td>
						<td>Acme Corp</td>
						<td>$1,234.56</td>
						<td>Paid</td>
					</tr>
					<tr>
						<td>INV-002</td>
						<td>Tech Solutions</td>
						<td>$987.65</td>
						<td>Pending</td>
					</tr>
					<tr>
						<td>INV-003</td>
						<td>Global Inc</td>
						<td>$2,345.67</td>
						<td>Paid</td>
					</tr>
				</tbody>
			}
			@popui.TablePagination(props.TablePagination{
				CurrentPage:        1,
				TotalPages:         260,
				TotalItems:         25991,
				RowsPerPage:        100,
				RowsPerPageOptions: []int{10, 25, 50, 100, 250},
				ShowRowsPerPage:    true,
				ItemsLabel:         "invoices",
				FirstPageURL:       "?page=1",
				PrevPageURL:        "?page=0",
				NextPageURL:        "?page=2",
				LastPageURL:        "?page=260",
			}) {
				@popui.Buttons() {
					@popui.Button(props.Button{
						Type:    "button",
						Size:    "sm",
						Variant: "secondary",
					}) {
						Export
					}
					@popui.Button(props.Button{
						Type:    "button",
						Size:    "sm",
						Variant: "primary",
					}) {
						Create Invoice
					}
				}
			}
		}
	}
}

API Reference

App

Root application container for full-window apps. Sets up the basic HTML structure with head and body, and includes Alpine.js for interactivity. Designed to be standalone or embedded in the Invopop Console.

Name	Type	Default	Description
`Title`	`string`	-	Page title displayed in browser tab
`Description`	`string`	-	Meta description for SEO
`AccentColor`	`string`	-	Accent color for the application
`Head`	`templ.Component`	`nil`	Additional content to include in the <head> section
`Data`	`string`	-	Alpine.js x-data attribute value for the application body's contents
`HTMX`	`bool`	`false`	When true, includes the HTMX javascript library for enhanced interactivity
`Scripts`	`[]props.Script`	`nil`	Additional script paths to include in the head (alternative to defining in Head property)
`Stylesheets`	`[]props.Link`	`nil`	Additional stylesheet links to include in the head (alternative to defining in Head property)

Main

Main content area wrapper for apps. Use this outside Header/Footer components. Contains the primary content and provides overflow handling.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the main element
`Class`	`string`	-	Additional CSS classes to merge with main styles
`Cloak`	`bool`	`false`	Add x-cloak attribute to hide content until Alpine.js initializes
`Data`	`string`	-	Alpine.js x-data attribute value for reactive state
`Center`	`bool`	`false`	Center the main content with a maximum width
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Header

Header area for apps with optional breadcrumb navigation. Use directly inside App component, not inside Main. Sticky positioned at top.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the header element
`Class`	`string`	-	Additional CSS classes to merge with header styles
`Title`	`templ.Component`	`nil`	Custom title component displayed on the left side of the header before breadcrumbs
`Data`	`string`	-	Alpine.js x-data attribute value for reactive state
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Breadcrumbs`	`[]props.Breadcrumb`	`nil`	Navigation breadcrumbs displayed on the left side of header

Footer

Footer component for apps with content justified to the end. Use directly inside App component, not inside Main.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the footer element
`Class`	`string`	-	Additional CSS classes to merge with footer styles
`Data`	`string`	-	Alpine.js x-data attribute value for reactive state
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Article

Article component for app content with optional full-width mode.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the article element
`Class`	`string`	-	Additional CSS classes to merge with article styles
`FullWidth`	`bool`	`false`	Makes the article take the full width of the main content area while maintaining padding
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Nav

Navigation component for apps.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the nav element
`Class`	`string`	-	Additional CSS classes to merge with nav styles
`Data`	`string`	-	Alpine.js x-data attribute value for reactive state
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Card

Flexible container components for displaying content in a bordered box.

Card content goes here

1234567891011121314
package examples

import popui "github.com/invopop/popui/go"

templ CardExample() {
	@popui.Card() {
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl">
				Card content goes here
			</div>
		}
	}
}

With Header

Cards can include a header with avatar, title, and subtitle using the CardHeader component.

John Doe

Software Engineer

This card includes a header with an avatar and title information.

1234567891011121314151617181920212223242526
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardWithHeaderExample() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "John Doe",
			Subtitle: "Software Engineer",
		}) {
			@popui.Avatar(props.Avatar{
				Size:    "lg",
				Initial: "J",
			})
		}
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl">
				This card includes a header with an avatar and title information.
			</div>
		}
	}
}

Disabled State

Cards can be disabled to indicate they are not interactive.

Disabled Card

Cannot be interacted with

This card is disabled.

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardDisabledExample() {
	@popui.Card(props.Card{Disabled: true}) {
		@popui.CardHeader(props.CardHeader{
			Title:    "Disabled Card",
			Subtitle: "Cannot be interacted with",
		})
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl">
				This card is disabled.
			</div>
		}
	}
}

As Link

Cards can act as clickable links by providing an Href prop, rendering as an anchor element.

Clickable Card

Click anywhere to navigate

This entire card is clickable.

12345678910111213141516171819202122232425262728
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardAsLinkExample() {
	@popui.Card(props.Card{
		Href: "/profile",
	}) {
		@popui.CardHeader(props.CardHeader{
			Title:    "Clickable Card",
			Subtitle: "Click anywhere to navigate",
		}) {
			@popui.Avatar(props.Avatar{
				Size:    "lg",
				Initial: "C",
			})
		}
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl">
				This entire card is clickable.
			</div>
		}
	}
}

Progress Bar

CardProgressBar displays progress with a visual indicator and optional counter.

Usage Statistics

Track your API consumption

API Requests · This month

7500 / 10000

12345678910111213141516171819202122232425262728293031
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardProgressBarExample() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "Usage Statistics",
			Subtitle: "Track your API consumption",
		}) {
			@popui.Avatar(props.Avatar{
				Size: "lg",
			}) {
				@popui.Image(props.Image{
					Src: "https://i.pravatar.cc/150?img=68",
					Alt: "Logo",
				})
			}
		}
		@popui.CardProgressBar(props.CardProgressBar{
			Title:    "API Requests",
			Subtitle: "This month",
			Current:  7500,
			Total:    10000,
		})
	}
}

Dashboard

CardDashboard displays multiple metrics in a grid layout.

Monthly Overview

Key performance metrics

Revenue
$12.5k
Orders
243
Customers
89

1234567891011121314151617181920212223242526272829303132
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardDashboardExample() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "Monthly Overview",
			Subtitle: "Key performance metrics",
		})
		@popui.CardContent() {
			@popui.CardDashboard() {
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Revenue",
					Value: "$12.5k",
				})
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Orders",
					Value: "243",
				})
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Customers",
					Value: "89",
				})
			}
		}
	}
}

File Card

CardFile provides a container for displaying file information.

dni_back_already_stored.png

Download

1234567891011121314151617181920212223242526
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ CardFileExample() {
	@popui.CardFile() {
		@popui.CardFileInfo(props.CardFileInfo{
			Label: "dni_back_already_stored.png",
		}) {
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Spanish_ID_card_%28back_side%29.webp/473px-Spanish_ID_card_%28back_side%29.webp.png?20210720095942" height="32" width="50"/>
		}
		@popui.Button(props.Button{
			Variant:  "transparent",
			Href:     "#",
			Download: true,
		}) {
			@icons.Download()
			Download
		}
	}
}

API Reference

Card

Main container component for displaying content in a bordered box.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the card element
`Class`	`string`	-	Additional CSS classes to merge with card styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Href`	`templ.SafeURL`	-	URL to navigate to when card is clicked (renders as anchor)
`Disabled`	`bool`	`false`	Disables the card and applies disabled styling

CardContent

Content container for cards with consistent padding and text styling.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the content element
`Class`	`string`	-	Additional CSS classes to merge with content styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

CardHeader

Header component for cards. Expects Avatar or other content as children.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the header element
`Class`	`string`	-	Additional CSS classes to merge with header styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Title`	`string`	-	Main title text
`Subtitle`	`string`	-	Secondary subtitle text

CardProgressBar

Displays progress with a visual bar and optional counter.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the progress bar element
`Class`	`string`	-	Additional CSS classes to merge with progress bar styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Title`	`string`	-	Main title text
`Subtitle`	`string`	-	Secondary subtitle text
`Current`	`int64`	`0`	Current progress value
`Total`	`int64`	`0`	Total/maximum value for progress
`HideCounter`	`bool`	`false`	Hides the numeric counter display

CardDashboard

Grid layout for displaying multiple metrics. Expects CardDashboardItem components as children.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the dashboard element
`Class`	`string`	-	Additional CSS classes to merge with dashboard styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

CardDashboardItem

Individual metric item for CardDashboard.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the item element
`Class`	`string`	-	Additional CSS classes to merge with item styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Label`	`string`	-	Label text for the metric
`Value`	`string`	-	Value text for the metric

CardFile

Container for displaying file information. Expects CardFileInfo and action buttons as children.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the file card element
`Class`	`string`	-	Additional CSS classes to merge with file card styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

CardFileInfo

Structured layout for file information within CardFile (icon, name, etc.).

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the file info element
`Class`	`string`	-	Additional CSS classes to merge with file info styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Label`	`string`	-	File name or label text to display

Empty State

Layout for displaying empty states with illustrations and call-to-action.

No results found

Try adjusting your search or filter to find what you're looking for.

123456789101112131415161718
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ EmptyStateExample() {
	@popui.EmptyState(props.EmptyState{
		Title:       "No results found",
		Description: "Try adjusting your search or filter to find what you're looking for.",
	}) {
		@popui.Button(props.Button{Variant: "primary"}) {
			Clear filters
		}
	}
}

API Reference

EmptyState

Layout component for displaying empty states with optional call-to-action.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the empty state element
`Class`	`string`	-	Additional CSS classes to merge with empty state styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Title`	`string`	-	Title text displayed prominently in the empty state
`Description`	`string`	-	Descriptive text providing context about the empty state

Separator

Horizontal divider with a dashed line for visual separation.

Content above

Content below

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
)

templ SeparatorExample() {
	<div>
		@popui.P() { Content above }
		@popui.Separator()
		@popui.P() { Content below }
	</div>
}

Custom Spacing

Adjust vertical spacing with custom classes.

Content above

Content below

1234567891011121314151617
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SeparatorCustomSpacingExample() {
	<div>
		@popui.P() { Content above }
		@popui.Separator(props.Separator{
			Class: "my-8",
		})
		@popui.P() { Content below }
	</div>
}

API Reference

Separator

Horizontal separator component with dashed line styling.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the separator element
`Class`	`string`	-	Additional CSS classes to merge with separator styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)

Checkbox

Checkbox inputs with optional toggle switch variant.

I agree to the terms and conditions

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CheckboxExample() {
	@popui.Checkbox(props.Checkbox{
		Name:  "terms",
		Label: "I agree to the terms and conditions",
	})
}

Checked State

Checkbox can be pre-checked using the Checked prop.

Subscribe to newsletter

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CheckboxCheckedExample() {
	@popui.Checkbox(props.Checkbox{
		Name:    "newsletter",
		Label:   "Subscribe to newsletter",
		Checked: true,
	})
}

Switch Variant

Use Variant="switch" for a toggle switch style.

Enable notifications

Marketing emails

1234567891011121314151617181920212223
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CheckboxSwitchExample() {
	<div class="space-y-3">
		@popui.Checkbox(props.Checkbox{
			Name:    "notifications",
			Label:   "Enable notifications",
			Variant: props.CheckboxVariantSwitch,
			Checked: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:    "marketing",
			Label:   "Marketing emails",
			Variant: props.CheckboxVariantSwitch,
		})
	</div>
}

Disabled State

Disabled checkboxes and switches with reduced opacity.

Disabled checkbox

Disabled checked checkbox

Disabled switch

1234567891011121314151617181920212223242526272829
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CheckboxDisabledExample() {
	<div class="space-y-3">
		@popui.Checkbox(props.Checkbox{
			Name:     "option1",
			Label:    "Disabled checkbox",
			Disabled: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:     "option2",
			Label:    "Disabled checked checkbox",
			Checked:  true,
			Disabled: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:     "option3",
			Label:    "Disabled switch",
			Variant:  props.CheckboxVariantSwitch,
			Disabled: true,
		})
	</div>
}

Option Group

Group multiple checkboxes together with a label.

Select your interests

Design

Development

Marketing

123456789101112131415161718192021222324252627
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CheckboxOptionGroupExample() {
	@popui.OptionGroup(props.OptionGroup{
		Label: "Select your interests",
	}) {
		@popui.Checkbox(props.Checkbox{
			Name:    "interest_design",
			Label:   "Design",
			Checked: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:  "interest_development",
			Label: "Development",
		})
		@popui.Checkbox(props.Checkbox{
			Name:  "interest_marketing",
			Label: "Marketing",
		})
	}
}

API Reference

Checkbox

Checkbox input with optional toggle switch variant.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier (auto-generated if not provided)
`Class`	`string`	-	Additional CSS classes to merge with checkbox styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Label`	`string`	-	Label text for the checkbox
`Variant`	`string`	-	Visual variant: "switch" for toggle switch style
`Name`	`string`	-	Form field name
`Value`	`string`	-	Form field value
`Checked`	`bool`	`false`	Whether the checkbox is checked
`Autofocus`	`bool`	`false`	Whether to autofocus on mount
`Disabled`	`bool`	`false`	Whether the checkbox is disabled

OptionGroup

Groups form elements like checkboxes and radio buttons with a label.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the group element
`Class`	`string`	-	Additional CSS classes to merge with group styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Label`	`string`	-	Label text for the group

Fieldset

Groups form fields together with proper spacing and optional legend.

Password

12345678910111213141516171819202122232425
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FieldsetExample() {
	@popui.Fieldset() {
		@popui.Input(props.Input{
			ID:          "email",
			Name:        "email",
			Label:       "Email",
			Placeholder: "Enter your email",
		})
		@popui.Input(props.Input{
			ID:          "password",
			Name:        "password",
			Type:        "password",
			Label:       "Password",
			Placeholder: "Enter your password",
		})
	}
}

With Legend

Add a legend to label the group of fields.

Account Information

Username

1234567891011121314151617181920212223242526
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FieldsetWithLegendExample() {
	@popui.Fieldset(props.Fieldset{
		Legend: "Account Information",
	}) {
		@popui.Input(props.Input{
			ID:          "username",
			Name:        "username",
			Label:       "Username",
			Placeholder: "Choose a username",
		})
		@popui.Input(props.Input{
			ID:          "email2",
			Name:        "email",
			Label:       "Email",
			Placeholder: "your@email.com",
		})
	}
}

Card Style

Card variant provides a bordered, card-style container for form fields.

Profile Settings

Full Name

Bio

123456789101112131415161718192021222324252627
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FieldsetCardStyleExample() {
	@popui.Fieldset(props.Fieldset{
		Legend:  "Profile Settings",
		Variant: props.FieldsetVariantCard,
	}) {
		@popui.Input(props.Input{
			ID:          "name",
			Name:        "name",
			Label:       "Full Name",
			Placeholder: "John Doe",
		})
		@popui.Textarea(props.Textarea{
			ID:          "bio",
			Name:        "bio",
			Label:       "Bio",
			Placeholder: "Tell us about yourself",
		})
	}
}

Custom Card Style

Card variant with custom classes.

Sudo

Enterprise

Stripe ID

Remove the Stripe ID to force the creation of a new Stripe customer, thus allowing a new Tax ID to be uploaded.

12345678910111213141516171819202122232425262728293031
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FieldsetHighlightedExample() {
	@popui.Fieldset(props.Fieldset{
		Legend:  "Sudo",
		Variant: "card",
		Class:   "bg-background-default-secondary",
	}) {
		@popui.Checkbox(props.Checkbox{
			ID:    "enterprise",
			Name:  "type",
			Label: "Enterprise",
			Value: "enterprise",
		})
		@popui.Input(props.Input{
			ID:          "stripe-id",
			Name:        "stripe_id",
			Label:       "Stripe ID",
			Placeholder: "Enter Stripe ID",
		})
		@popui.Info() {
			Remove the Stripe ID to force the creation of a new Stripe customer, thus allowing a new Tax ID to be uploaded.
		}
	}
}

API Reference

Fieldset

Groups form fields together with proper spacing and optional legend.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the fieldset element
`Class`	`string`	-	Additional CSS classes to merge with fieldset styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Legend`	`string`	-	Text to display as the fieldset legend
`Variant`	`string`	-	Visual variant: "card" for bordered card style

File

File input components for selecting and uploading files. Use InputFile for basic file selection or FileUpload for avatar/image uploads with preview.

12345678910111213
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileExample() {
	@popui.InputFile(props.InputFile{
		Name: "document",
	})
}

Disabled State

Disabled file inputs prevent user interaction.

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileDisabledExample() {
	@popui.InputFile(props.InputFile{
		Name:     "document",
		Disabled: true,
	})
}

Accept Specific Types

Restrict file selection to specific file types using the Accept prop.

1234567891011121314151617181920
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileAcceptTypesExample() {
	<div class="space-y-4">
		@popui.InputFile(props.InputFile{
			Name:   "images",
			Accept: "image/*",
		})
		@popui.InputFile(props.InputFile{
			Name:   "documents",
			Accept: ".pdf,.doc,.docx",
		})
	</div>
}

Multiple Files

Allow multiple file selection with the Multiple prop.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileMultipleExample() {
	@popui.InputFile(props.InputFile{
		Name:     "photos",
		Multiple: true,
		Accept:   "image/*",
	})
}

Upload Without Preview

FileUpload without an initial avatar shows a placeholder icon.

Upload Profile Picture

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileUploadNoPreviewExample() {
	@popui.FileUpload(props.InputFile{
		Name: "profile-picture",
		Text: "Upload Profile Picture",
	})
}

Avatar Upload

Use FileUpload for file inputs with avatar preview.

Change Avatar

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileAvatarExample() {
	@popui.FileUpload(props.InputFile{
		Name:      "avatar",
		AvatarURL: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
		AvatarAlt: "User Avatar",
		Text:      "Change Avatar",
	})
}

Square Preview

Use PreviewSquare for square avatar previews (useful for logos).

Upload Logo

1234567891011121314151617
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileSquarePreviewExample() {
	@popui.FileUpload(props.InputFile{
		Name:          "logo",
		AvatarURL:     "https://api.dicebear.com/7.x/shapes/svg?seed=Logo",
		AvatarAlt:     "Company Logo",
		Text:          "Upload Logo",
		PreviewSquare: true,
	})
}

With Additional Buttons

Pass children to add extra buttons like Remove or Cancel.

Change Avatar

1234567891011121314151617181920212223
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FileWithButtonsExample() {
	@popui.FileUpload(props.InputFile{
		Name:      "avatar",
		AvatarURL: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
		AvatarAlt: "User Avatar",
		Text:      "Change Avatar",
	}) {
		@popui.Button(props.Button{
			Type: "button",
			Size: "sm",
		}) {
			Remove
		}
	}
}

API Reference

InputFile

Basic file input component.

Name	Type	Default	Description
`ID`	`string`	`auto-generated`	Unique identifier for the file input
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Name`	`string`	-	Name attribute for form submission
`Accept`	`string`	-	Accepted file types (e.g., "image/*", ".pdf,.doc")
`Capture`	`string`	-	Capture media from device camera ("user" or "environment")
`Multiple`	`bool`	`false`	Allow multiple file selection
`Autofocus`	`bool`	`false`	Autofocus the file input on page load
`Required`	`bool`	`false`	Make the file input required
`Disabled`	`bool`	`false`	Disable the file input

FileUpload

File upload component with avatar preview.

Name	Type	Default	Description
`ID`	`string`	`auto-generated`	Unique identifier for the file upload
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Name`	`string`	-	Name attribute for form submission
`Accept`	`string`	-	Accepted file types
`Capture`	`string`	-	Capture media from device camera ("user" or "environment")
`Required`	`bool`	`false`	Make the file upload required
`Disabled`	`bool`	`false`	Disable the file upload
`Multiple`	`bool`	`false`	Allow multiple file selection
`AvatarURL`	`string`	-	Avatar image URL for preview
`AvatarAlt`	`string`	-	Alt text for avatar image
`Text`	`string`	-	Text label before upload button
`PreviewSquare`	`bool`	`false`	Use square preview instead of circle

Input

Text input field for capturing user data with various types and validation.

12345678910111213
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputExample() {
	@popui.Input(props.Input{
		Placeholder: "Enter your name",
	})
}

Input Types

Input supports various types including text, email, password, date, and more.

1234567891011121314151617181920212223
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputTypesExample() {
	<div class="space-y-4">
		@popui.Input(props.Input{
			Type:        "email",
			Placeholder: "email@example.com",
		})
		@popui.Input(props.Input{
			Type:        "password",
			Placeholder: "Enter password",
		})
		@popui.Input(props.Input{
			Type:        "date",
		})
	</div>
}

With Label

Use the Label prop for a simple text label above the input.

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputWithLabelExample() {
	@popui.Input(props.Input{
		ID:          "email-with-label",
		Label:       "Email",
		Type:        "email",
		Placeholder: "email@example.com",
	})
}

Custom Label

For advanced label features like hints, render a Label component separately with proper spacing using a flex container.

Username

1234567891011121314151617181920
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputCustomLabelExample() {
	<div class="flex flex-col space-y-2 w-full">
		@popui.Label(props.Label{ID: "username", Hint: "Choose a unique username"}) {
			Username
		}
		@popui.Input(props.Input{
			ID:          "custom-username",
			Type:        "text",
			Placeholder: "johndoe",
		})
	</div>
}

Disabled & Read-only

Input can be disabled to prevent interaction or set to read-only to prevent editing.

1234567891011121314151617181920
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputDisabledExample() {
	<div class="space-y-4">
		@popui.Input(props.Input{
			Placeholder: "This input is disabled",
			Disabled:    true,
		})
		@popui.Input(props.Input{
			Value:    "Read-only value",
			Readonly: true,
		})
	</div>
}

With Error

Input can display error messages for validation feedback.

Please enter a valid email address

123456789101112131415161718192021
package examples

import (
	"errors"
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputWithErrorExample() {
	@popui.Input(props.Input{
		ID:          "email-with-error",
		Label:       "Email",
		Type:        "email",
		Placeholder: "email@example.com",
		Value:       "invalid-email",
		Error: props.Error{
			Error: errors.New("Please enter a valid email address"),
		},
	})
}

API Reference

Input

Text input field with support for various types and validation.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the input element
`Class`	`string`	-	Additional CSS classes to merge with input styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Type`	`string`	`text`	Input type: text, email, password, tel, url, date, time, week, month, search, file
`Placeholder`	`string`	-	Placeholder text displayed when input is empty
`Value`	`string`	-	Initial or current value of the input
`Name`	`string`	-	Name attribute for form submission
`Label`	`string`	-	Simple label text displayed above the input
`Prefix`	`string`	-	Text or symbol displayed before the input field
`Autofocus`	`bool`	`false`	Automatically focuses the input on page load
`Disabled`	`bool`	`false`	Disables the input
`Readonly`	`bool`	`false`	Makes the input read-only
`Required`	`bool`	`false`	Marks the input as required for form validation
`Error`	`props.Error`	-	Error configuration to display validation feedback below the input

Error

Error configuration for displaying validation feedback.

Name	Type	Default	Description
`Error`	`error`	-	Go error object to display (calls .Error() method)
`Text`	`string`	-	Text string to display as error message
`Class`	`string`	-	Additional CSS classes to merge with error styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes for the error element

Label

Form label element with optional hint tooltip.

Username

12345678910111213
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ LabelExample() {
	@popui.Label(props.Label{ID: "label-username"}) {
		Username
	}
}

With Hint

Add a hint tooltip with the Hint prop. A question mark icon will appear that shows the hint on hover.

Email Address

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ LabelWithHintExample() {
	@popui.Label(props.Label{
		ID:   "email-with-hint",
		Hint: "This will be your primary contact email",
	}) {
		Email Address
	}
}

Custom Styling

Use the Class prop to customize the label appearance with Tailwind classes.

Password

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ LabelCustomStyleExample() {
	@popui.Label(props.Label{
		ID:    "custom-password",
		Class: "text-foreground-accent text-base font-semibold",
	}) {
		Password
	}
}

Usage

The Label component is used in:

Checkbox
Input
Select
Slider
Textarea

API Reference

Label

Form label element with optional hint tooltip.

Name	Type	Default	Description
`ID`	`string`	-	ID of the input element this label is for (sets the 'for' attribute)
`Class`	`string`	-	Additional CSS classes to merge with label styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Hint`	`string`	-	Tooltip text shown on hover via a question mark icon

Radio

Radio button inputs for selecting a single option from a group.

Basic Plan

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioExample() {
	@popui.Radio(props.Radio{
		Name:  "plan",
		Value: "basic",
		Label: "Basic Plan",
	})
}

Checked State

Radio can be pre-checked using the Checked prop.

Basic Plan

Pro Plan

1234567891011121314151617181920212223
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioCheckedExample() {
	<div class="space-y-3">
		@popui.Radio(props.Radio{
			Name:    "subscription",
			Value:   "basic",
			Label:   "Basic Plan",
		})
		@popui.Radio(props.Radio{
			Name:    "subscription",
			Value:   "pro",
			Label:   "Pro Plan",
			Checked: true,
		})
	</div>
}

Disabled State

Disabled radio buttons with reduced opacity.

Disabled radio

Disabled checked radio

12345678910111213141516171819202122232425
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioDisabledExample() {
	<div class="space-y-3">
		@popui.Radio(props.Radio{
			Name:     "option",
			Value:    "1",
			Label:    "Disabled radio",
			Disabled: true,
		})
		@popui.Radio(props.Radio{
			Name:     "option",
			Value:    "2",
			Label:    "Disabled checked radio",
			Checked:  true,
			Disabled: true,
		})
	</div>
}

With Description

Add a description below the label for additional context.

Select your subscription

Free Perfect for personal projects and testing.

Pro - $9/month Best for professionals and small teams.

Enterprise Custom pricing for large organizations.

123456789101112131415161718192021222324252627282930313233
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioWithDescriptionExample() {
	@popui.OptionGroup(props.OptionGroup{
		Label: "Select your subscription",
	}) {
		@popui.Radio(props.Radio{
			Name:        "subscription",
			Value:       "free",
			Label:       "Free",
			Description: "Perfect for personal projects and testing.",
			Checked:     true,
		})
		@popui.Radio(props.Radio{
			Name:        "subscription",
			Value:       "pro",
			Label:       "Pro - $9/month",
			Description: "Best for professionals and small teams.",
		})
		@popui.Radio(props.Radio{
			Name:        "subscription",
			Value:       "enterprise",
			Label:       "Enterprise",
			Description: "Custom pricing for large organizations.",
		})
	}
}

Option Group

Group multiple radio buttons together with a label.

Choose your plan

Free

Pro - $9/month

Enterprise - Contact us

123456789101112131415161718192021222324252627282930
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioOptionGroupExample() {
	@popui.OptionGroup(props.OptionGroup{
		Label: "Choose your plan",
	}) {
		@popui.Radio(props.Radio{
			Name:    "plan",
			Value:   "free",
			Label:   "Free",
			Checked: true,
		})
		@popui.Radio(props.Radio{
			Name:  "plan",
			Value: "pro",
			Label: "Pro - $9/month",
		})
		@popui.Radio(props.Radio{
			Name:  "plan",
			Value: "enterprise",
			Label: "Enterprise - Contact us",
		})
	}
}

Card Variant

Card-style radio buttons with descriptions, perfect for selection groups that need more context.

Starter Perfect for individuals and small projects.

Professional Best for growing teams and businesses.

Enterprise Custom solutions for large organizations.

12345678910111213141516171819202122232425262728293031323334
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioCardExample() {
	<div class="space-y-3">
		@popui.Radio(props.Radio{
			Name:        "plan-card",
			Value:       "starter",
			Label:       "Starter",
			Description: "Perfect for individuals and small projects.",
			Variant:     "card",
			Checked:     true,
		})
		@popui.Radio(props.Radio{
			Name:        "plan-card",
			Value:       "professional",
			Label:       "Professional",
			Description: "Best for growing teams and businesses.",
			Variant:     "card",
		})
		@popui.Radio(props.Radio{
			Name:        "plan-card",
			Value:       "enterprise",
			Label:       "Enterprise",
			Description: "Custom solutions for large organizations.",
			Variant:     "card",
		})
	</div>
}

Theme Variant

Circular color theme selector buttons. Use theme color constants (ColorSherwood, ColorOcean, ColorGrape, ColorMetal, ColorCosmos) as the Variant value.

1234567891011121314151617181920212223242526272829303132333435363738
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioThemeExample() {
	<div class="flex gap-3">
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "sherwood",
			Variant: props.ColorSherwood,
			Checked: true,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "ocean",
			Variant: props.ColorOcean,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "grape",
			Variant: props.ColorGrape,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "metal",
			Variant: props.ColorMetal,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "cosmos",
			Variant: props.ColorCosmos,
		})
	</div>
}

API Reference

Radio

Radio button input component.

Name	Type	Default	Description
`ID`	`string`	`auto-generated`	Unique identifier for the radio input
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Label`	`string`	-	Label text for the radio button
`Description`	`string`	-	Optional description text shown below the label
`Name`	`string`	-	Name attribute for form submission
`Value`	`string`	-	Value of the radio button
`Variant`	`string`	-	Style variant: "card" for card-style radios, or theme colors (props.ColorSherwood, props.ColorOcean, props.ColorGrape, props.ColorMetal, props.ColorCosmos)
`Checked`	`bool`	`false`	Pre-check the radio button
`Autofocus`	`bool`	`false`	Autofocus the radio button on page load
`Disabled`	`bool`	`false`	Disable the radio button

Select

Dropdown selection control for choosing one or more options from a list.

12345678910111213141516171819
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectExample() {
	@popui.Select(props.Select{
		Name: "country",
	}) {
		<option value="">Choose a country</option>
		<option value="es">Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
		<option value="it">Italy</option>
	}
}

With Label

Use the Label prop for a simple text label above the select.

Country

1234567891011121314151617181920
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectWithLabelExample() {
	@popui.Select(props.Select{
		ID:    "country-with-label",
		Name:  "country",
		Label: "Country",
	}) {
		<option value="">Choose a country</option>
		<option value="es">Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
	}
}

Custom Label

For advanced label features like hints, render a Label component separately with proper spacing using a flex container.

Country

123456789101112131415161718192021222324252627
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectCustomLabelExample() {
	<div class="flex flex-col space-y-2">
		@popui.Label(props.Label{
			ID:   "custom-country",
			Hint: "Choose your preferred country",
		}) {
			Country
		}
		@popui.Select(props.Select{
			ID:   "custom-country",
			Name: "country",
		}) {
			<option value="">Select a country</option>
			<option value="es">Spain</option>
			<option value="fr">France</option>
			<option value="de">Germany</option>
		}
	</div>
}

Disabled

Select can be disabled to prevent user interaction.

123456789101112131415161718
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectDisabledExample() {
	@popui.Select(props.Select{
		Name:     "country",
		Disabled: true,
	}) {
		<option value="es" selected>Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
	}
}

With Error

Select can display error messages for validation feedback.

Country

Please select a country

123456789101112131415161718192021222324
package examples

import (
	"errors"
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectWithErrorExample() {
	@popui.Select(props.Select{
		ID:    "country-with-error",
		Name:  "country",
		Label: "Country",
		Error: props.Error{
			Error: errors.New("Please select a country"),
		},
	}) {
		<option value="">Choose a country</option>
		<option value="es">Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
	}
}

API Reference

Select

Dropdown selection control with support for labels, validation, and multiple selection.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the select element
`Class`	`string`	-	Additional CSS classes to merge with select styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Name`	`string`	-	Name attribute for form submission
`Label`	`string`	-	Simple label text displayed above the select
`Disabled`	`bool`	`false`	Disables the select
`Autofocus`	`bool`	`false`	Automatically focuses the select on page load
`Multiple`	`bool`	`false`	Enables multiple option selection
`Required`	`bool`	`false`	Marks the select as required for form validation
`Error`	`props.Error`	-	Error configuration to display validation feedback below the select

Error

Error configuration for displaying validation feedback.

Name	Type	Default	Description
`Error`	`error`	-	Go error object to display (calls .Error() method)
`Text`	`string`	-	Text string to display as error message
`Class`	`string`	-	Additional CSS classes to merge with error styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes for the error element

Slider

A range slider input for selecting numeric values.

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SliderExample() {
	@popui.Slider(props.Slider{
		Name:  "volume",
		Min:   "0",
		Max:   "100",
		Value: "50",
	})
}

With Label

Add a label using the children slot.

Volume

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SliderWithLabelExample() {
	@popui.Slider(props.Slider{
		ID:    "slider-volume-custom",
		Name:  "volume",
		Min:   "0",
		Max:   "100",
		Value: "50",
	}) {
		@popui.Label(props.Label{ID: "volume"}) {
			Volume
		}
	}
}

With Options

Display labeled tick marks using ListOptions.

Size

12345678910111213141516171819202122232425262728
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SliderWithOptionsExample() {
	@popui.Slider(props.Slider{
		ID:    "slider-size-options",
		Name:  "size",
		Min:   "0",
		Max:   "4",
		Value: "2",
		ListOptions: []props.SliderListOption{
			{Value: "0", Label: "XS"},
			{Value: "1", Label: "S"},
			{Value: "2", Label: "M"},
			{Value: "3", Label: "L"},
			{Value: "4", Label: "XL"},
		},
	}) {
		@popui.Label(props.Label{ID: "size"}) {
			Size
		}
	}
}

Custom Step

Control the granularity of value changes with the Step prop.

Price Range

12345678910111213141516171819202122
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SliderCustomStepExample() {
	@popui.Slider(props.Slider{
		ID:    "slider-price-custom",
		Name:  "price",
		Min:   "0",
		Max:   "1000",
		Step:  "50",
		Value: "500",
	}) {
		@popui.Label(props.Label{ID: "price"}) {
			Price Range
		}
	}
}

API Reference

Slider

A range slider input for selecting numeric values.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier (auto-generated if not provided)
`Class`	`string`	-	Additional CSS classes to merge with slider styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Name`	`string`	-	Form field name
`Value`	`string`	-	Initial value of the slider
`Min`	`string`	-	Minimum value
`Max`	`string`	-	Maximum value
`Step`	`string`	-	Step increment for value changes
`ListOptions`	`[]SliderListOption`	`nil`	List of labeled tick marks to display below the slider

SliderListOption

Defines a labeled tick mark for the slider.

Name	Type	Default	Description
`Value`	`string`	-	The value at this position
`Label`	`string`	-	The label to display for this value

Textarea

Multi-line text input field for capturing longer user input with support for labels and validation.

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaExample() {
	@popui.Textarea(props.Textarea{
		Placeholder: "Enter your message...",
		Rows:        4,
	})
}

With Label

Use the Label prop for a simple text label above the textarea.

Biography

1234567891011121314151617
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaWithLabelExample() {
	@popui.Textarea(props.Textarea{
		ID:          "bio",
		Name:        "bio",
		Label:       "Biography",
		Placeholder: "Tell us about yourself...",
		Rows:        6,
	})
}

Custom Label

For advanced label features like hints, render a Label component separately with proper spacing using a flex container.

Comments

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaCustomLabelExample() {
	<div class="flex flex-col gap-2">
		@popui.Label(props.Label{ID: "comments", Hint: "Share your thoughts in detail"}) {
			Comments
		}
		@popui.Textarea(props.Textarea{
			ID:          "comments",
			Name:        "comments",
			Placeholder: "Enter your comments...",
			Rows:        5,
		})
	</div>
}

Disabled & Read-only

Textarea can be disabled to prevent interaction or set to read-only to prevent editing.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaDisabledExample() {
	@popui.Textarea(props.Textarea{
		Value:    "This textarea is disabled and cannot be edited.",
		Disabled: true,
		Rows:     3,
	})
}

With Error

Textarea can display error messages for validation feedback.

Message

Message must be at least 10 characters long

123456789101112131415161718192021
package examples

import (
	"errors"
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaWithErrorExample() {
	@popui.Textarea(props.Textarea{
		ID:          "message",
		Name:        "message",
		Label:       "Message",
		Placeholder: "Enter your message...",
		Rows:        4,
		Error: props.Error{
			Error: errors.New("Message must be at least 10 characters long"),
		},
	})
}

Monospaced Font

Use the Class prop with font-mono for code or monospaced text display.

Code Snippet

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaMonospacedExample() {
	@popui.Textarea(props.Textarea{
		Label:       "Code Snippet",
		Class:       "font-mono",
		Placeholder: "Enter code here...",
		Rows:        6,
	})
}

Contenteditable

Use Contenteditable for rich text editing with a div element instead of a textarea. It renders as a contenteditable div that can display formatted content.

Standard Textarea

Contenteditable Div

This is a contenteditable div. You can use formatted text and it will render properly.

12345678910111213141516171819202122
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaContenteditableExample() {
	<div class="space-y-4">
		@popui.Textarea(props.Textarea{
			Label:       "Standard Textarea",
			Value:       "This is plain text in a textarea element. HTML tags like <strong>bold</strong> are displayed as text.",
			Rows:        3,
		})
		@popui.Contenteditable(props.Textarea{
			Label: "Contenteditable Div",
			Value: "This is a contenteditable div. You can use <strong>formatted</strong> <em>text</em> and it will render properly.",
			Rows:  3,
		})
	</div>
}

API Reference

Textarea

Multi-line text input field with support for labels and validation.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the textarea element
`Class`	`string`	-	Additional CSS classes to merge with textarea styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Name`	`string`	-	Name attribute for form submission
`Placeholder`	`string`	-	Placeholder text displayed when textarea is empty
`Value`	`string`	-	Initial or current value of the textarea
`Label`	`string`	-	Simple label text displayed above the textarea
`Rows`	`int`	`4`	Number of visible text rows
`Disabled`	`bool`	`false`	Disables the textarea
`Readonly`	`bool`	`false`	Makes the textarea read-only
`Required`	`bool`	`false`	Marks the textarea as required for form validation
`Autofocus`	`bool`	`false`	Automatically focuses the textarea on page load
`Error`	`props.Error`	-	Error configuration to display validation feedback below the textarea

Error

Error configuration for displaying validation feedback.

Name	Type	Default	Description
`Error`	`error`	-	Go error object to display (calls .Error() method)
`Text`	`string`	-	Text string to display as error message
`Class`	`string`	-	Additional CSS classes to merge with error styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes for the error element

Breadcrumbs

Navigation breadcrumbs to show the current page location.

Home
Products
Electronics

1234567891011121314151617181920212223
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ BreadcrumbsExample() {
	@popui.Breadcrumbs() {
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Home",
			Href:  "/",
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Products",
			Href:  "/products",
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Electronics",
		})
	}
}

With Children

Use children instead of Label prop for custom content.

🏠 Home
📦 Products
💻 Electronics

12345678910111213141516171819202122232425
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ BreadcrumbsWithChildrenExample() {
	@popui.Breadcrumbs() {
		@popui.Breadcrumb(props.Breadcrumb{
			Href: "/",
		}) {
			<span>🏠 Home</span>
		}
		@popui.Breadcrumb(props.Breadcrumb{
			Href: "/products",
		}) {
			<span>📦 Products</span>
		}
		@popui.Breadcrumb(props.Breadcrumb{}) {
			<span>💻 Electronics</span>
		}
	}
}

API Reference

Breadcrumbs

Container component for breadcrumb navigation.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the breadcrumb element
`Class`	`string`	-	Additional CSS classes to merge with breadcrumb styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)

Breadcrumb

Individual breadcrumb item. Renders as a link if Href is provided, otherwise as plain text.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the breadcrumb item element
`Class`	`string`	-	Additional CSS classes to merge with item styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Label`	`string`	-	Text label for the breadcrumb item
`Href`	`templ.SafeURL`	-	URL for the breadcrumb link. If empty, renders as plain text

Popover

A context menu that displays when a button is clicked.

123456789101112131415161718192021222324
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ PopoverExample() {
	@popui.Popover(props.Popover{
		ID:          "popover-default",
		ButtonLabel: "···",
	}) {
		@popui.PopoverItem() {
			Edit
		}
		@popui.PopoverItem() {
			Duplicate
		}
		@popui.PopoverItem() {
			Delete
		}
	}
}

Right Aligned

Align the popover menu to the right side of the button

12345678910111213141516171819202122232425
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ PopoverRightAlignedExample() {
	@popui.Popover(props.Popover{
		ID:          "popover-right",
		ButtonLabel: "···",
		RightAlign:  true,
	}) {
		@popui.PopoverItem() {
			Settings
		}
		@popui.PopoverItem() {
			Profile
		}
		@popui.PopoverItem() {
			Logout
		}
	}
}

API Reference

Popover

The main popover component that displays a context menu.

Name	Type	Default	Description
`ID` *	`string`	-	Unique identifier for the popover element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the menu container
`ButtonLabel`	`string`	-	Text label for the trigger button
`ButtonVariant`	`string`	-	Variant style for the trigger button (e.g., 'primary', 'secondary', 'transparent')
`RightAlign`	`bool`	`false`	Align the popover menu to the right side of the button

PopoverItem

Individual menu item within the popover.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the item element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the list item

Tabs

Interactive tab navigation component with default and pill variants.

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TabsExample() {
	@popui.Tabs(props.Tabs{}) {
		@popui.Tab(props.Tab{Active: true}) {
			Account
		}
		@popui.Tab(props.Tab{}) {
			Settings
		}
		@popui.Tab(props.Tab{}) {
			Privacy
		}
	}
}

Active State

Control which tab is active using the Active prop.

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TabsActiveExample() {
	@popui.Tabs(props.Tabs{}) {
		@popui.Tab(props.Tab{}) {
			Overview
		}
		@popui.Tab(props.Tab{Active: true}) {
			Details
		}
		@popui.Tab(props.Tab{}) {
			History
		}
	}
}

Variants

Tabs come in two variants: default (underline) and pill.

1234567891011121314151617181920212223242526272829303132333435363738
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TabsVariantsExample() {
	<div class="space-y-6">
		<div>
			@popui.Tabs(props.Tabs{}) {
				@popui.Tab(props.Tab{Active: true}) {
					Overview
				}
				@popui.Tab(props.Tab{}) {
					Details
				}
				@popui.Tab(props.Tab{}) {
					History
				}
			}
		</div>
		<div>
			@popui.Tabs(props.Tabs{Variant: "pill"}) {
				@popui.Tab(props.Tab{Active: true, Variant: "pill"}) {
					Profile
				}
				@popui.Tab(props.Tab{Variant: "pill"}) {
					Preferences
				}
				@popui.Tab(props.Tab{Variant: "pill"}) {
					Security
				}
			}
		</div>
	</div>
}

With Icons

Tabs can contain icons alongside text.

12345678910111213141516171819202122232425
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ TabsWithIconsExample() {
	@popui.Tabs(props.Tabs{}) {
		@popui.Tab(props.Tab{Active: true}) {
			@icons.User()
			Account
		}
		@popui.Tab(props.Tab{}) {
			@icons.Settings()
			Settings
		}
		@popui.Tab(props.Tab{}) {
			@icons.Lock()
			Privacy
		}
	}
}

API Reference

Tabs

The main tabs container component.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the tabs element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the tabs container
`Variant`	`string`	`default`	Style variant: "default" for underline tabs or "pill" for pill-style tabs

Tab

Individual tab button component used inside Tabs.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the tab element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the tab button
`Active`	`bool`	`false`	Whether this tab is currently active
`Variant`	`string`	`default`	Style variant: "default" for underline tabs or "pill" for pill-style tabs (should match parent Tabs variant)

Accordion

Vertically stacked interactive sections to organize content.

Is it accessible?

Yes. It uses native HTML details/summary elements for full keyboard navigation and screen reader support.

Is it styled?

Yes. It comes with default styles using Tailwind CSS that you can customize.

1234567891011121314151617181920212223242526272829303132
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AccordionExample() {
	<div class="w-full space-y-2">
		@popui.Accordion(props.Accordion{Open: true}) {
			@popui.AccordionTrigger() {
				Is it accessible?
			}
			@popui.AccordionContent() {
				@popui.Description() {
					Yes. It uses native HTML details/summary elements for full keyboard navigation and screen reader support.
				}
			}
		}
		@popui.Accordion() {
			@popui.AccordionTrigger() {
				Is it styled?
			}
			@popui.AccordionContent() {
				@popui.Description() {
					Yes. It comes with default styles using Tailwind CSS that you can customize.
				}
			}
		}
	</div>
}

API Reference

Accordion

The main accordion container component using HTML details element.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the accordion element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the details element
`Open`	`bool`	`false`	Whether the accordion is initially expanded

AccordionTrigger

Clickable trigger element that toggles the accordion item.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the trigger element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the summary element

AccordionContent

Collapsible content area of the accordion item.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the content element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the content div

Avatar

Display user profile images or initials in circular containers.

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AvatarExample() {
	<div class="flex items-center gap-4">
		@popui.Avatar(props.Avatar{Initial: "J"})
		@popui.Avatar(props.Avatar{Size: "lg", Initial: "X"})
	</div>
}

Sizes

Avatar comes in two sizes: default (small) and large (lg).

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AvatarSizesExample() {
	<div class="flex items-center gap-4">
		@popui.Avatar(props.Avatar{Initial: "D"})
		@popui.Avatar(props.Avatar{Size: "lg", Initial: "L"})
	</div>
}

With Images

You can pass an Image component as a child instead of using the Initial prop.

123456789101112131415161718
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AvatarWithImagesExample() {
	<div class="flex items-center gap-4">
		@popui.Avatar() {
			@popui.Image(props.Image{Src: "https://i.pravatar.cc/150?img=1"})
		}
		@popui.Avatar(props.Avatar{Size: "lg"}) {
			@popui.Image(props.Image{Src: "https://i.pravatar.cc/150?img=3"})
		}
	</div>
}

API Reference

Avatar

Displays a user avatar with an image or initials in a circular container.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the avatar element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the div element
`Initial`	`string`	-	Text to display (typically initials) when no image is provided
`Size`	`string`	`"" (default)`	Size variant: "lg" for large (8x8), default is small (5x5)

Description List

Semantic HTML definition list for displaying term-description pairs.

Name: John Doe
Email: john@example.com
Role: Administrator

123456789101112131415161718192021222324
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ DescriptionListExample() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Name",
			Value: "John Doe",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Email",
			Value: "john@example.com",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Role",
			Value: "Administrator",
		})
	}
}

Custom Width

Override the default width to fit your layout.

Company: Acme Corporation
Address: 123 Main Street, City, Country

12345678910111213141516171819202122
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ DescriptionListCustomWidthExample() {
	@popui.DescriptionList(props.DescriptionList{
		Class: "w-full",
	}) {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Company",
			Value: "Acme Corporation",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Address",
			Value: "123 Main Street, City, Country",
		})
	}
}

Rich Text Content

Use DT and DD components for complex HTML content.

Name: John Doe
Bio: Software engineer with expertise in Go and TypeScript.
10+ years experience
Open source contributor

12345678910111213141516171819202122232425262728
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ DescriptionListRichTextExample() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Name",
			Value: "John Doe",
		})
		@popui.DescriptionListItem() {
			@popui.DT() { Bio }
			@popui.DD() {
				@popui.Prose() {
					<p>Software engineer with expertise in <strong>Go</strong> and <strong>TypeScript</strong>.</p>
					<ul>
						<li>10+ years experience</li>
						<li>Open source contributor</li>
					</ul>
				}
			}
		}
	}
}

API Reference

DescriptionList

Container for definition list items (dl element).

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the list element
`Class`	`string`	-	Additional CSS classes to merge with list styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)

DescriptionListItem

Individual item with label and value, rendered as dt/dd pair.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the item element
`Class`	`string`	-	Additional CSS classes to merge with item styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Label`	`string`	-	The term or label to display (dt element)
`Value`	`string`	-	The description or value to display (dd element)

DT

Definition term element (dt) with proper styling for use in DescriptionListItem.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

DD

Definition description element (dd) with proper styling for use in DescriptionListItem.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Flag

Display country flags using ISO 3166-1 alpha-2 country codes.

CSS required

This component requires the flag-icons CSS library. Use @css.Flag() in your template.

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
	"github.com/invopop/popui/go/css"
)

templ FlagExample() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			@popui.Flag(props.Flag{
				Country: "ES",
			})
		</body>
	</html>
}

Multiple Countries

Display flags for different countries using ISO 3166-1 alpha-2 codes.

1234567891011121314151617181920212223242526
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
	"github.com/invopop/popui/go/css"
)

templ FlagCountriesExample() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			<div class="flex gap-2">
				@popui.Flag(props.Flag{Country: "ES"})
				@popui.Flag(props.Flag{Country: "US"})
				@popui.Flag(props.Flag{Country: "GB"})
				@popui.Flag(props.Flag{Country: "FR"})
				@popui.Flag(props.Flag{Country: "DE"})
				@popui.Flag(props.Flag{Country: "IT"})
			</div>
		</body>
	</html>
}

In Context

Flags work great alongside text labels in lists or forms.

Spain

United States

United Kingdom

1234567891011121314151617181920212223242526272829303132
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
	"github.com/invopop/popui/go/css"
)

templ FlagInContextExample() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			<div class="flex flex-col gap-2">
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "ES"})
					<span class="text-sm">Spain</span>
				</div>
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "US"})
					<span class="text-sm">United States</span>
				</div>
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "GB"})
					<span class="text-sm">United Kingdom</span>
				</div>
			</div>
		</body>
	</html>
}

API Reference

Flag

Display country flags using the flag-icons library.

Name	Type	Default	Description
`Country` *	`string`	-	ISO 3166-1 alpha-2 country code (e.g., 'ES', 'US', 'GB')
`ID`	`string`	-	Unique identifier for the flag element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the element

Image

Displays images with rounded corners and proper object fit.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ImageExample() {
	<div class="w-32 h-32">
		@popui.Image(props.Image{
			Src: "https://i.pravatar.cc/300?img=1",
		})
	</div>
}

Custom Size

Use custom classes to control image dimensions and object fit.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ImageCustomSizeExample() {
	@popui.Image(props.Image{
		Src:   "https://i.pravatar.cc/300?img=5",
		Alt:   "Product image",
		Class: "w-40 h-24 object-contain",
	})
}

With Avatar

Wrap Image inside Avatar component for circular avatars.

123456789101112131415161718192021222324
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ImageWithAvatarExample() {
	<div class="flex gap-4">
		@popui.Avatar(props.Avatar{Size: "lg"}) {
			@popui.Image(props.Image{
				Src: "https://i.pravatar.cc/150?img=8",
				Alt: "User avatar",
			})
		}
		@popui.Avatar() {
			@popui.Image(props.Image{
				Src: "https://i.pravatar.cc/150?img=12",
				Alt: "User avatar",
			})
		}
	</div>
}

API Reference

Image

Displays an image with rounded corners and proper object fit.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the image element
`Class`	`string`	-	Additional CSS classes to merge with image styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Src`	`string`	-	Image source URL
`Alt`	`string`	-	Alternative text for accessibility

Table

Display data in a structured table format with automatic styling for headers, cells, and borders.

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Editor

1234567891011121314151617181920212223242526272829303132333435
package examples

import (
	popui "github.com/invopop/popui/go"
)

templ TableExample() {
	@popui.Table() {
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Role</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john@example.com</td>
				<td>Admin</td>
			</tr>
			<tr>
				<td>Jane Smith</td>
				<td>jane@example.com</td>
				<td>User</td>
			</tr>
			<tr>
				<td>Bob Johnson</td>
				<td>bob@example.com</td>
				<td>Editor</td>
			</tr>
		</tbody>
	}
}

Variants

Tables support a card variant that adds an outer border. Default tables have no outer border.

Default (no border)

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User

Card variant (with border)

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TableVariantsExample() {
	<div class="flex flex-col gap-6">
		<div>
			<h3 class="text-sm font-medium mb-2">Default (no border)</h3>
			@popui.Table() {
				<thead>
					<tr>
						<th>Name</th>
						<th>Email</th>
						<th>Role</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>John Doe</td>
						<td>john@example.com</td>
						<td>Admin</td>
					</tr>
					<tr>
						<td>Jane Smith</td>
						<td>jane@example.com</td>
						<td>User</td>
					</tr>
				</tbody>
			}
		</div>
		<div>
			<h3 class="text-sm font-medium mb-2">Card variant (with border)</h3>
			@popui.Table(props.Table{Variant: "card"}) {
				<thead>
					<tr>
						<th>Name</th>
						<th>Email</th>
						<th>Role</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>John Doe</td>
						<td>john@example.com</td>
						<td>Admin</td>
					</tr>
					<tr>
						<td>Jane Smith</td>
						<td>jane@example.com</td>
						<td>User</td>
					</tr>
				</tbody>
			}
		</div>
	</div>
}

Clickable Rows

Add hover effects to table rows by passing additional classes via the Class prop.

1234567891011121314151617181920212223242526272829303132333435363738
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TableClickableExample() {
	@popui.Table(props.Table{
		Class: "[&_tr:hover_td]:bg-background-default-secondary [&_tr:hover_td]:cursor-pointer",
	}) {
		<thead>
			<tr>
				<th>Product</th>
				<th>Status</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Widget A</td>
				<td>Available</td>
				<td>$29.99</td>
			</tr>
			<tr>
				<td>Widget B</td>
				<td>Out of Stock</td>
				<td>$39.99</td>
			</tr>
			<tr>
				<td>Widget C</td>
				<td>Available</td>
				<td>$49.99</td>
			</tr>
		</tbody>
	}
}

Right-Aligned Cells

Right-align specific columns using the Class prop with arbitrary variants like [&_th:last-child]:text-right.

1234567891011121314151617181920212223242526272829303132333435363738
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TableRightAlignExample() {
	@popui.Table(props.Table{
		Class: "[&_th:last-child]:text-right [&_td:last-child]:text-right",
	}) {
		<thead>
			<tr>
				<th>Item</th>
				<th>Quantity</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Product A</td>
				<td>3</td>
				<td>$89.97</td>
			</tr>
			<tr>
				<td>Product B</td>
				<td>1</td>
				<td>$39.99</td>
			</tr>
			<tr>
				<td>Product C</td>
				<td>2</td>
				<td>$99.98</td>
			</tr>
		</tbody>
	}
}

With Avatars

Tables can contain any components including avatars. Use the Avatar component for user initials or images.

1234567891011121314151617181920212223242526272829303132333435363738394041
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TableCustomContentExample() {
	@popui.Table() {
		<thead>
			<tr>
				<th>User</th>
				<th>Email</th>
				<th>Role</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<div class="flex items-center gap-2">
						@popui.Avatar(props.Avatar{Initial: "J"})
						<span>John Doe</span>
					</div>
				</td>
				<td>john@example.com</td>
				<td>Admin</td>
			</tr>
			<tr>
				<td>
					<div class="flex items-center gap-2">
						@popui.Avatar(props.Avatar{Initial: "S"})
						<span>Jane Smith</span>
					</div>
				</td>
				<td>jane@example.com</td>
				<td>Editor</td>
			</tr>
		</tbody>
	}
}

Table Pagination

Add pagination controls to your table with TablePagination component. Uses AnchorButton with URLs for navigation and supports custom action buttons via children slot.

/ 260

25,991 invoices

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TablePaginationExample() {
	<div class="border border-border rounded-lg overflow-hidden">
		@popui.Table() {
			<thead>
				<tr>
					<th>Invoice ID</th>
					<th>Customer</th>
					<th>Amount</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>INV-001</td>
					<td>Acme Corp</td>
					<td>$1,234.56</td>
					<td>Paid</td>
				</tr>
				<tr>
					<td>INV-002</td>
					<td>Tech Solutions</td>
					<td>$987.65</td>
					<td>Pending</td>
				</tr>
				<tr>
					<td>INV-003</td>
					<td>Global Inc</td>
					<td>$2,345.67</td>
					<td>Paid</td>
				</tr>
			</tbody>
		}
		@popui.TablePagination(props.TablePagination{
			CurrentPage:        1,
			TotalPages:         260,
			TotalItems:         25991,
			RowsPerPage:        100,
			RowsPerPageOptions: []int{10, 25, 50, 100, 250},
			ShowRowsPerPage:    true,
			ItemsLabel:         "invoices",
			FirstPageURL:       "?page=1",
			PrevPageURL:        "?page=0",
			NextPageURL:        "?page=2",
			LastPageURL:        "?page=260",
		}) {
			@popui.Buttons() {
				@popui.Button(props.Button{
					Type:    "button",
					Size:    "sm",
					Variant: "secondary",
				}) {
					Export
				}
				@popui.Button(props.Button{
					Type:    "button",
					Size:    "sm",
					Variant: "primary",
				}) {
					Create Invoice
				}
			}
		}
	</div>
}

API Reference

Table

A table component with automatic styling for borders, spacing, and typography. The table wrapper provides rounded corners and overflow handling.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the table element
`Class`	`string`	-	Additional CSS classes to merge with base styles. Use Tailwind's arbitrary variants like [&_tr:hover_td]:bg-gray-100 for advanced styling
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the table element
`Variant`	`string`	-	Visual style: 'card' adds outer border and rounded corners

TablePagination

Pagination controls for tables with page navigation, rows per page selector, and total count display. Uses AnchorButton for URL-based navigation. Supports a children slot for custom action buttons.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the pagination container
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes for the container
`CurrentPage`	`int`	`1`	Current active page number (1-indexed)
`TotalPages`	`int`	`1`	Total number of pages available
`TotalItems`	`int`	`0`	Total count of items across all pages
`RowsPerPage`	`int`	`100`	Number of rows displayed per page
`RowsPerPageOptions`	`[]int`	`[10, 25, 50, 100]`	Available options for rows per page dropdown
`ShowRowsPerPage`	`bool`	`false`	Whether to show the rows per page dropdown
`ItemsLabel`	`string`	`items`	Label for the total count (e.g., 'invoices', 'users')
`FirstPageURL`	`templ.SafeURL`	-	URL for the first page navigation button
`PrevPageURL`	`templ.SafeURL`	-	URL for the previous page navigation button
`NextPageURL`	`templ.SafeURL`	-	URL for the next page navigation button
`LastPageURL`	`templ.SafeURL`	-	URL for the last page navigation button
`PageInputAttributes`	`templ.Attributes`	-	Additional attributes for the page number input field

Typography

Text components for headings, paragraphs, descriptions, and formatted content.

Headings

Title and Subtitle components for page and section headings.

Page Title

Section Subtitle

12345678910111213
package examples

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyHeadingsExample() {
	<div class="space-y-4">
		@popui.Title() { Page Title }
		@popui.Subtitle() { Section Subtitle }
	</div>
}

Paragraphs

Standard paragraph and description text components.

This is a standard paragraph with default styling.

This is a description with secondary text color.

12345678910111213
package examples

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyParagraphsExample() {
	<div class="space-y-2">
		@popui.P() { This is a standard paragraph with default styling. }
		@popui.Description() { This is a description with secondary text color. }
	</div>
}

Inline Text

Mark component for highlighted text.

This paragraph contains highlighted text using the Mark component.

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyInlineExample() {
	@popui.P() {
		<span>This paragraph contains </span>
		@popui.Mark() { highlighted text }
		<span> using the Mark component.</span>
	}
}

Alert Messages

Info and Warning components with icons.

This is an informational message with an icon.

This is a warning message with an alert icon.

12345678910111213
package examples

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyAlertsExample() {
	<div class="space-y-3">
		@popui.Info() { This is an informational message with an icon. }
		@popui.Warning() { This is a warning message with an alert icon. }
	</div>
}

Prose

Wrapper for raw HTML with Tailwind prose styling.

Prose Heading

This component wraps raw HTML with Tailwind prose styling for consistent typography.

Automatically styled lists
Formatted headings
Consistent spacing

123456789101112131415161718
package examples

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyProseExample() {
	@popui.Prose() {
		<h1>Prose Heading</h1>
		<p>This component wraps raw HTML with Tailwind prose styling for consistent typography.</p>
		<ul>
			<li>Automatically styled lists</li>
			<li>Formatted headings</li>
			<li>Consistent spacing</li>
		</ul>
	}
}

API Reference

Title

H1 heading element with bold styling.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Subtitle

H2 subheading element with medium weight.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

P

Standard paragraph element.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Description

Paragraph with secondary text color.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Mark

Inline highlighted text element.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Info

Informational message with icon.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Warning

Warning message with alert icon.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Prose

Container for raw HTML with Tailwind prose styling.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

Button

Trigger actions and events with customizable button components.

12345678910
package examples

import popui "github.com/invopop/popui/go"

templ ButtonExample() {
	@popui.Button() {
		Default Button
	}
}

Variants

Buttons come in different variants to communicate different actions: default, primary, secondary, danger, and transparent.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ ButtonVariantsExample() {
	<div class="flex gap-2">
		@popui.Button() {
			@icons.User()
			Default
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
			@icons.Download()
			Primary
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
			@icons.Settings()
			Secondary
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger}) {
			@icons.Delete()
			Danger
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantTransparent}) {
			@icons.Lock()
			Transparent
		}
		@popui.Button(props.Button{Size: props.ButtonSizeIcon}) {
			@icons.Settings()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary, Size: props.ButtonSizeIcon}) {
			@icons.Add()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantSecondary, Size: props.ButtonSizeIcon}) {
			@icons.Settings()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger, Size: props.ButtonSizeIcon}) {
			@icons.Delete()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantTransparent, Size: props.ButtonSizeIcon}) {
			@icons.Lock()
		}
	</div>
}

Sizes

Buttons are available in small (sm), default (md), and icon sizes.

1234567891011121314151617181920212223242526272829303132333435
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonSizesExample() {
	<div class="flex gap-2 items-center">
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Size:    props.ButtonSizeSmall,
		}) {
			Small
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
		}) {
			Default
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Size:    props.ButtonSizeLarge,
		}) {
			Large
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Size:    props.ButtonSizeIcon,
		}) {
			+
		}
	</div>
}

With Content

Buttons can contain any content including text, icons, or combinations.

1234567891011121314151617181920
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/icons"
	"github.com/invopop/popui/go/props"
)

templ ButtonWithIconsExample() {
	<div class="flex gap-2">
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
			Save
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger}) {
			@icons.Delete()
			Delete
		}
	</div>
}

Disabled State

Buttons can be disabled to prevent user interaction.

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonDisabledExample() {
	<div class="flex gap-2">
		@popui.Button(props.Button{Disabled: true}) {
			Disabled Default
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary, Disabled: true}) {
			Disabled Primary
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger, Disabled: true}) {
			Disabled Danger
		}
	</div>
}

Anchor Button

Set the Href property to render a link styled as a button.

Visit Website Open in New Tab

12345678910111213141516171819202122232425
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonAnchorExample() {
	<div class="flex gap-2">
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Href:    "/docs",
		}) {
			Visit Website
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantSecondary,
			Href:    "/docs",
			Target:  "_blank",
		}) {
			Open in New Tab
		}
	</div>
}

API Reference

Button

Button component that can render as either a <button> or <a> element. When Href is set, renders as an anchor link styled as a button.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the element
`Class`	`string`	-	Additional CSS classes to merge with button styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Variant`	`string`	`primary`	Visual style: 'primary', 'secondary', 'danger', or 'transparent'
`Size`	`string`	`md`	Button size: 'sm', 'md' (default), 'lg', or 'icon'
`Type`	`string`	-	Button type: 'button', 'submit', or 'reset' (form buttons only)
`Name`	`string`	-	Name attribute for form submission (form buttons only)
`Value`	`string`	-	Value attribute for form submission (form buttons only)
`Form`	`string`	-	Associates button with a form by ID (form buttons only)
`Disabled`	`bool`	`false`	Disables the button (form buttons only)
`Autofocus`	`bool`	`false`	Automatically focuses the button on page load (form buttons only)
`Href`	`templ.SafeURL`	-	URL destination; when set, renders as an anchor link
`Target`	`string`	-	Target attribute: '_blank', '_self', etc. (anchor buttons only)
`Rel`	`string`	-	Rel attribute for link relationship (anchor buttons only)
`Download`	`bool`	`false`	Triggers download of the linked resource (anchor buttons only)

Button Copy

Copy-to-clipboard button with text truncation and visual feedback.

JS required

This component requires JavaScript (see code example)

123456789101112131415161718192021
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
	"github.com/invopop/popui/go/scripts"
)

templ ButtonCopyExample() {
	<html>
		<head>
			@scripts.ButtonCopy()
		</head>
		<body>
			@popui.ButtonCopy(props.ButtonCopy{
				Value: "e73d5d20834934588127389172381789bc2f275460",
			})
		</body>
	</html>
}

Variants

Button copy supports all button variants: default, primary, secondary, danger, and transparent.

12345678910111213141516171819202122232425262728293031
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonCopyVariantsExample() {
	<div class="flex flex-col gap-2">
		@popui.ButtonCopy(props.ButtonCopy{
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantPrimary,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantSecondary,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantDanger,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantTransparent,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
	</div>
}

Sizes

Button copy supports three sizes: sm, md (default), and lg.

1234567891011121314151617181920212223
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonCopySizesExample() {
	<div class="flex flex-col gap-2">
		@popui.ButtonCopy(props.ButtonCopy{
			Size:  props.ButtonSizeSmall,
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Size:  props.ButtonSizeLarge,
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
	</div>
}

Truncated Text

Show only prefix and suffix characters with ellipsis in between.

12345678910111213141516171819202122
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonCopyTruncatedExample() {
	<div class="flex items-center gap-4">
		@popui.ButtonCopy(props.ButtonCopy{
			Value:        "e73d5d20834934588127389172381789bc2f275460",
			PrefixLength: 4,
			SuffixLength: 4,
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Value:        "123e4567-e89b-12d3-a456-426614174000",
			PrefixLength: 8,
			SuffixLength: 4,
		})
	</div>
}

API Reference

ButtonCopy

Copy-to-clipboard button with optional text truncation. Shows a checkmark icon for 2 seconds after copying.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the button copy container
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes for the hidden input element
`Variant`	`string`	-	Visual style: '', 'primary', 'secondary', 'danger', or 'transparent'
`Size`	`string`	`md`	Button size: 'sm', 'md' (default), or 'lg'
`Value`	`string`	-	The text value to display and copy
`PrefixLength`	`int`	`0`	Number of characters to show at the beginning (0 shows full text)
`SuffixLength`	`int`	`0`	Number of characters to show at the end (0 shows full text)

Flash Message

Toast-style success message for quick feedback.

Saved

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FlashMessageSuccessExample() {
	@popui.FlashMessage(props.FlashMessage{
		Type:    "success",
		Message: "Saved",
	})
}

Custom Message

Provide a longer custom message for more context.

Profile updated successfully!

1234567891011121314
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ FlashMessageCustomMessageExample() {
	@popui.FlashMessage(props.FlashMessage{
		Type:    "success",
		Message: "Profile updated successfully!",
	})
}

API Reference

FlashMessage

Toast-style message component for quick feedback.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the flash message element
`Class`	`string`	-	Additional CSS classes to merge with flash message styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Type`	`string`	-	Message type: currently supports 'success'
`Message`	`string`	-	Message text to display

Notification

Feedback messages with different severity types and icons.

Info

New feature available

Check out the new reporting dashboard in your settings.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ NotificationInfoExample() {
	@popui.Notification(props.Notification{
		Type:        "info",
		Text:        "New feature available",
		Description: "Check out the new reporting dashboard in your settings.",
	})
}

Warning

Action required

Your payment method will expire soon. Please update it.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ NotificationWarningExample() {
	@popui.Notification(props.Notification{
		Type:        "warning",
		Text:        "Action required",
		Description: "Your payment method will expire soon. Please update it.",
	})
}

Error

Upload failed

The file size exceeds the maximum allowed limit.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ NotificationErrorExample() {
	@popui.Notification(props.Notification{
		Type:        "error",
		Text:        "Upload failed",
		Description: "The file size exceeds the maximum allowed limit.",
	})
}

Success

Changes saved

Your profile has been updated successfully.

123456789101112131415
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ NotificationSuccessExample() {
	@popui.Notification(props.Notification{
		Type:        "success",
		Text:        "Changes saved",
		Description: "Your profile has been updated successfully.",
	})
}

API Reference

Notification

Feedback message component with different severity types.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the notification element
`Class`	`string`	-	Additional CSS classes to merge with notification styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Type`	`string`	-	Notification type: info, warning, error, or success
`Text`	`string`	-	Main notification text (bold)
`Description`	`string`	-	Additional descriptive text

Tag Status

Status indicators with optional dots and different color variants.

DraftPaidErrorProcessing

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TagStatusExample() {
	<div class="flex items-center gap-2">
		@popui.TagStatus(props.TagStatus{Label: "Draft", Status: "orange"})
		@popui.TagStatus(props.TagStatus{Label: "Paid", Status: "green"})
		@popui.TagStatus(props.TagStatus{Label: "Error", Status: "red"})
		@popui.TagStatus(props.TagStatus{Label: "Processing", Status: "yellow"})
	</div>
}

With Dot

Add a dot indicator using the Dot prop.

Draft Paid Error

12345678910111213141516
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TagStatusWithDotExample() {
	<div class="flex items-center gap-2">
		@popui.TagStatus(props.TagStatus{Label: "Draft", Status: "orange", Dot: true})
		@popui.TagStatus(props.TagStatus{Label: "Paid", Status: "green", Dot: true})
		@popui.TagStatus(props.TagStatus{Label: "Error", Status: "red", Dot: true})
		@popui.TagStatus(props.TagStatus{Dot: true, Status: "blue"})
	</div>
}

Colors

Available color variants for different statuses.

GreyGreenYellowRedOrangeBluePurpleOliveTealCrimsonSteel BlueEmpty

123456789101112131415161718192021222324
package examples

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TagStatusColorsExample() {
	<div class="flex flex-wrap items-center gap-2">
		@popui.TagStatus(props.TagStatus{Label: "Grey", Status: "grey"})
		@popui.TagStatus(props.TagStatus{Label: "Green", Status: "green"})
		@popui.TagStatus(props.TagStatus{Label: "Yellow", Status: "yellow"})
		@popui.TagStatus(props.TagStatus{Label: "Red", Status: "red"})
		@popui.TagStatus(props.TagStatus{Label: "Orange", Status: "orange"})
		@popui.TagStatus(props.TagStatus{Label: "Blue", Status: "blue"})
		@popui.TagStatus(props.TagStatus{Label: "Purple", Status: "purple"})
		@popui.TagStatus(props.TagStatus{Label: "Olive", Status: "olive"})
		@popui.TagStatus(props.TagStatus{Label: "Teal", Status: "teal"})
		@popui.TagStatus(props.TagStatus{Label: "Crimson", Status: "crimson"})
		@popui.TagStatus(props.TagStatus{Label: "Steel Blue", Status: "steelBlue"})
		@popui.TagStatus(props.TagStatus{Label: "Empty", Status: "empty"})
	</div>
}

API Reference

TagStatus

Status tag component with color variants and optional dot indicator.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the tag element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the tag element
`Label`	`string`	-	Text label displayed in the tag
`Status`	`string`	`grey`	Color variant: grey, green, yellow, red, orange, blue, purple, olive, teal, crimson, steelBlue, empty
`Dot`	`bool`	`false`	Whether to display a colored dot indicator