12345678910111213141516171819202122232425262728293031
package examples

import (
	"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>
}

1234567891011121314151617181920212223242526272829303132
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"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() {
			@popui.Block(props.Block{
				Class: "items-center justify-center border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary",
			}) {
				This is where the page contents goes.
				}
			}
		}
		@popui.Footer() {
			<span class="text-sm text-foreground-default-secondary">&copy; 2025 Invopop Inc.</span>
		}
	}
}

123456789101112131415161718192021222324252627
package examples

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

12345678910111213141516171819202122232425262728293031323334353637383940414243
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"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 flex-1 items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary">
			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>
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"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.ButtonGroup() {
					@popui.Button(props.Button{
						Type:    "button",
						Size:    "sm",
						Variant: "secondary",
					}) {
						Create Invoice
					}
				}
			}
		}
	}
}

12345678910111213
package examples

import (
	"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>
}

12345678910111213
package examples

import (
	"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>
}

1234567891011121314151617
package examples

import (
	"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>
}

12345678910111213141516171819202122232425262728293031323334353637383940414243
package examples

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

templ AvatarColorsExample() {
	<div class="flex items-center gap-2">
		@popui.Avatar(props.Avatar{
			Initial: "XML",
			Color:   "document-xml",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "PDF",
			Color:   "document-pdf",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "PNG",
			Color:   "document-png",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "CSV",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "OK",
			Color:   "success",
			Size:    props.AvatarSizeLarge,
		})
		@popui.Avatar(props.Avatar{
			Initial: "JD",
			Color:   "accent",
		})
	</div>
}

12345678910111213141516171819202122
package examples

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

123456789101112131415161718192021222324
package examples

import (
	"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>
		}
	}
}

12345678910111213141516171819202122232425262728293031323334
package examples

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

templ BreadcrumbsWithAttributesExample() {
	@popui.Breadcrumbs() {
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Home",
			Href:  "/",
			Attributes: templ.Attributes{
				"hx-get":      "/",
				"hx-target":   "#content",
				"hx-swap":     "innerHTML",
				"hx-push-url": "/",
			},
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Products",
			Href:  "/products",
			Attributes: templ.Attributes{
				"hx-get":      "/products",
				"hx-target":   "#content",
				"hx-swap":     "innerHTML",
				"hx-push-url": "/products",
			},
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Electronics",
		})
	}
}

1234567891011
package examples

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

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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
package examples

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

templ ButtonVariantsExample() {
	@popui.ButtonGroup() {
		@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
		}
		<div class="flex items-center rounded-md bg-background-default-negative px-2 py-1.5">
			@popui.Button(props.Button{Variant: props.ButtonVariantInverse}) {
				@icons.Reload()
				Inverse
			}
		</div>
		@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()
		}
	}
}

12345678910111213141516171819202122232425262728293031323334
package examples

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

templ ButtonSizesExample() {
	@popui.ButtonGroup() {
		@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,
		}) {
			+
		}
	}
}

12345678910111213141516171819
package examples

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

templ ButtonWithIconsExample() {
	@popui.ButtonGroup() {
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
			Save
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger}) {
			@icons.Delete()
			Delete
		}
	}
}

1234567891011121314151617181920
package examples

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

templ ButtonDisabledExample() {
	@popui.ButtonGroup() {
		@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
		}
	}
}

123456789101112131415161718192021222324
package examples

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

templ ButtonAnchorExample() {
	@popui.ButtonGroup() {
		@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
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
package examples

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

templ ButtonGroupAlignExample() {
	<div class="space-y-4">
		<div>
			<p class="text-sm text-foreground-secondary mb-2">Left (default)</p>
			@popui.ButtonGroup() {
				@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
					@icons.Save()
					Save
				}
				@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
					Cancel
				}
			}
		</div>
		<div>
			<p class="text-sm text-foreground-secondary mb-2">Center</p>
			@popui.ButtonGroup(props.ButtonGroup{Align: props.ButtonGroupAlignCenter}) {
				@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
					@icons.Save()
					Save
				}
				@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
					Cancel
				}
			}
		</div>
		<div>
			<p class="text-sm text-foreground-secondary mb-2">Right</p>
			@popui.ButtonGroup(props.ButtonGroup{Align: props.ButtonGroupAlignRight}) {
				@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
					@icons.Save()
					Save
				}
				@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
					Cancel
				}
			}
		</div>
	</div>
}

12345678910111213141516171819
package examples

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

templ ButtonCopyToClipboardExample() {
	<div class="flex items-center gap-4">
		@popui.Button(props.Button{
			Copy: "go get github.com/invopop/popui.go",
		})
		@popui.Button(props.Button{
			Copy:             "123e4567-e89b-12d3-a456-426614174000",
			CopyPrefixLength: 8,
			CopySuffixLength: 4,
		})
	</div>
}

12345678910111213
package examples

import "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 text-foreground-default-tertiary">
				Card content goes here
			</div>
		}
	}
}

12345678910111213141516171819202122232425
package examples

import (
	"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 text-foreground-default-tertiary">
				This card includes a header with an avatar and title information.
			</div>
		}
	}
}

1234567891011121314151617181920
package examples

import (
	"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 text-foreground-default-tertiary">
				This card is disabled.
			</div>
		}
	}
}

123456789101112131415161718192021222324252627
package examples

import (
	"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 text-foreground-default-tertiary">
				This entire card is clickable.
			</div>
		}
	}
}

123456789101112131415161718192021222324252627282930
package examples

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

12345678910111213141516171819202122232425262728293031
package examples

import (
	"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() {
			<ul class="grid grid-cols-3 gap-x-3">
				<li class="flex flex-col items-center py-3 px-2 rounded-md border border-border bg-background-default-secondary">
					<p class="text-foreground-default-secondary text-sm">Revenue</p>
					<p class="text-foreground text-xl font-medium">$12.5k</p>
				</li>
				<li class="flex flex-col items-center py-3 px-2 rounded-md border border-border bg-background-default-secondary">
					<p class="text-foreground-default-secondary text-sm">Orders</p>
					<p class="text-foreground text-xl font-medium">243</p>
				</li>
				<li class="flex flex-col items-center py-3 px-2 rounded-md border border-border bg-background-default-secondary">
					<p class="text-foreground-default-secondary text-sm">Customers</p>
					<p class="text-foreground text-xl font-medium">89</p>
				</li>
			</ul>
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
package examples

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

templ CardDeckExample() {
	@popui.CardDeck() {
		@popui.CardDeckHead() {
			<div class="flex items-center gap-1">
				<span>Oct 01, 2025</span>
				@icons.ArrowRight()
				<span>Oct 31, 2025</span>
			</div>
			@popui.TagStatus(props.TagStatus{Label: "Current", Status: "grey"})
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-1.5">
				<span class="size-4 inline-flex items-center justify-center [&>svg]:size-full">
					@icons.Invopop()
				</span>
				<span class="font-medium text-foreground">Enterprise</span>
			</div>
			<div class="flex items-center gap-4">
				<div class="flex flex-wrap items-baseline gap-2 text-base justify-end">
					<div class="flex items-baseline gap-1 text-nowrap">
						<span class="text-foreground-default-secondary">Documents:</span>
						<span class="font-medium text-foreground">100</span>
					</div>
					<div class="h-3 w-px bg-background-default-tertiary-hover"></div>
					<div class="flex items-baseline gap-1 text-nowrap ">
						<span class="text-foreground-default-secondary">Price:</span>
						<span class="font-medium text-foreground">€0.00 / month</span>
					</div>
				</div>
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-1.5">
				@popui.Image(props.Image{
					Src:   "https://assets.invopop.com/apps/chargebee/icon.svg",
					Alt:   "Chargebee",
					Class: "h-4 w-4 rounded-none",
				})
				<span class="font-medium text-foreground">Chargebee</span>
			</div>
			<div class="flex items-center gap-4">
				<div class="flex flex-wrap items-baseline gap-2 text-base justify-end">
					<div class="flex items-baseline gap-1">
						<span class="text-foreground-default-secondary">Seats:</span>
						<span class="font-medium text-foreground">10</span>
					</div>
					<div class="h-3 w-px bg-background-default-tertiary-hover"></div>
					<div class="flex items-baseline gap-1">
						<span class="text-foreground-default-secondary">Price:</span>
						<span class="font-medium text-foreground">€0.00 / month</span>
					</div>
				</div>
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142
package examples

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

templ CardDeckAddressExample() {
	@popui.CardDeck() {
		@popui.CardDeckHead() {
			<span>Address</span>
			@popui.Button(props.Button{Size: "sm"}) {
				Manage
			}
		}
		@popui.Card(props.Card{Class: "p-3"}) {
			@popui.DescriptionList(props.DescriptionList{Class: "w-full space-y-3"}) {
				@popui.DescriptionListItem(props.DescriptionListItem{
					Label: "Company legal name",
					Value: "Invopop S.L. Billing",
				})
				@popui.DescriptionListItem(props.DescriptionListItem{
					Label: "Billing email",
					Value: "juan@invopop.com",
				})
				@popui.DescriptionListItem() {
					@popui.DT() {
						Address
					}
					@popui.DD(props.DD{Class: "flex flex-col"}) {
						<span>Calle Pradillo 42, Madrid</span>
						<span>Madrid, 28002, ES</span>
					}
				}
				@popui.DescriptionListItem(props.DescriptionListItem{
					Label: "Tax ID",
					Value: "ESX3157928M",
				})
			}
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
package examples

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

templ CardDeckPaymentExample() {
	@popui.CardDeck() {
		@popui.CardDeckHead() {
			<span>Payment</span>
			@popui.Button(props.Button{Size: "sm"}) {
				@icons.Add()
				<span>Add</span>
			}
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-2">
				@popui.Image(props.Image{
					Src:   "https://assets.invopop.com/payment-methods/visa.svg",
					Alt:   "Visa",
					Class: "h-4 w-6 rounded-none object-contain",
				})
				<span class="font-medium text-foreground">· 3709</span>
			</div>
			<div class="flex items-center gap-3">
				<span class="text-base text-foreground-default-secondary">Exp 03/29</span>
				@popui.TagStatus(props.TagStatus{Label: "Default", Status: "grey"})
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-2">
				@popui.Image(props.Image{
					Src:   "https://assets.invopop.com/payment-methods/mastercard.svg",
					Alt:   "Mastercard",
					Class: "h-4 w-6 rounded-none object-contain",
				})
				<span class="font-medium text-foreground">· 8374</span>
			</div>
			<div class="flex items-center gap-3">
				<span class="text-base text-foreground-default-secondary">Exp 11/32</span>
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
	}
}

12345678910111213
package examples

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

1234567891011121314
package examples

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

12345678910111213141516171819202122
package examples

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

templ CheckboxDescriptionExample() {
	<div class="space-y-4">
		@popui.Checkbox(props.Checkbox{
			Name:        "marketing",
			Label:       "Marketing communications",
			Description: "Receive emails about new products, features, and more.",
		})
		@popui.Checkbox(props.Checkbox{
			Name:        "analytics",
			Label:       "Usage analytics",
			Description: "Help us improve by sharing anonymous usage data.",
			Checked:     true,
		})
	</div>
}

12345678910111213141516171819202122
package examples

import (
	"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>
}

12345678910111213141516171819202122232425262728293031
package examples

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

templ CheckboxSwitchDescriptionExample() {
	<div class="space-y-3">
		@popui.Checkbox(props.Checkbox{
			Name:        "notifications",
			Label:       "Push notifications",
			Description: "Get notified about important updates and messages.",
			Variant:     props.CheckboxVariantSwitch,
			Checked:     true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:        "marketing",
			Label:       "Marketing emails",
			Description: "Receive emails about new products and special offers.",
			Variant:     props.CheckboxVariantSwitch,
		})
		@popui.Checkbox(props.Checkbox{
			Name:        "analytics",
			Label:       "Usage analytics",
			Description: "Help us improve by sharing anonymous usage data.",
			Variant:     props.CheckboxVariantSwitch,
			Checked:     true,
		})
	</div>
}

12345678910111213141516171819202122232425262728
package examples

import (
	"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>
}

1234567891011121314151617181920212223242526
package examples

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

1234567891011121314151617181920212223242526272829
package examples

import (
	"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",
		}) {
			@popui.DD() {
				<a href="mailto:john@example.com">john@example.com</a>
			}
		}
		@popui.DescriptionListItem(props.DescriptionListItem{
			Value: "Administrator",
		}) {
			@popui.DT() {
				Role
			}
		}
	}
}

123456789101112131415161718192021
package examples

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

1234567891011121314151617181920212223242526272829
package examples

import (
	"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>
				}
			}
		}
	}
}

12345678910111213141516171819202122232425262728293031
package examples

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

templ DescriptionListActionsExample() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Role", Value: "Director"})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Inline:       true,
			Label:        "Entry ID",
			Value:        "ee42413c-79fc-42d0-a7f7-65f76990ab20",
			PrefixLength: 8,
			SuffixLength: 4,
			Actions: []props.DescriptionListAction{
				{Icon: icons.Duplicate(), Copy: "ee42413c-79fc-42d0-a7f7-65f76990ab20", Attributes: templ.Attributes{"aria-label": "Copy"}},
				{Icon: icons.ExternalLink(), URL: templ.SafeURL("https://app.invopop.com/silo-entry/ee42413c-79fc-42d0-a7f7-65f76990ab20"), Attributes: templ.Attributes{"aria-label": "Open in a new tab"}},
			},
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Endpoint",
			Value: "0009:552100554",
			Actions: []props.DescriptionListAction{
				{Icon: icons.Duplicate(), Copy: "0009:552100554", Attributes: templ.Attributes{"aria-label": "Copy"}},
			},
		})
	}
}

12345678910111213141516171819202122232425262728293031
package examples

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

templ DescriptionListDetailViewExample() {
	<div class="w-[360px]">
		<h3 class="py-3 text-base font-medium text-foreground">Details</h3>
		@popui.DescriptionList(props.DescriptionList{Class: "w-full space-y-1 border-b border-border pb-4"}) {
			@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Role", Value: "Seller"})
			@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Status", Value: "Registered"})
			@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Country"})
			@popui.DescriptionListItem(props.DescriptionListItem{
				Inline:       true,
				Mono:         true,
				Label:        "ID",
				Value:        "01980ffb-94e1-7002-8f1d-3c5a2b7e9d44",
				PrefixLength: 8,
				SuffixLength: 4,
				Actions: []props.DescriptionListAction{
					{Icon: icons.Duplicate(), Copy: "01980ffb-94e1-7002-8f1d-3c5a2b7e9d44", Attributes: templ.Attributes{"aria-label": "Copy"}},
				},
			})
		}
		<h3 class="py-3 text-base font-medium text-foreground">Inboxes</h3>
		<p class="text-base text-foreground-default-secondary">No inboxes</p>
	</div>
}

123456789101112131415161718192021222324
package examples

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

12345678910111213141516171819202122232425
package examples

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

1234567891011121314151617181920212223242526
package examples

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

12345678910111213141516171819202122232425
package examples

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

templ FieldsetCardExample() {
	@popui.Fieldset(props.Fieldset{
		Legend:  "Categories",
		Variant: props.FieldsetVariantCard,
	}) {
		@popui.Select(props.Select{
			Multiple: true,
			Name:        "categories",
			Placeholder: "Select categories",
			Options: []props.SelectOption{
				{Value: "document", Label: "Document", Selected: true},
				{Value: "accounting", Label: "Accounting"},
				{Value: "payments", Label: "Payments"},
				{Value: "tax", Label: "Tax"},
			},
		}.GenerateID())
	}
}

12345678910111213141516171819202122232425262728293031323334353637383940
package examples

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

templ FieldsetCardFormExample() {
	@popui.Fieldset(props.Fieldset{
		Legend:  "URLs",
		Variant: props.FieldsetVariantCard,
	}) {
		<div class="grid grid-cols-2 gap-4">
			@popui.Input(props.Input{
				ID:          "config-url",
				Name:        "config_url",
				Label:       "Config URL",
				Placeholder: "https://",
			})
			@popui.Input(props.Input{
				ID:          "launch-url",
				Name:        "launch_url",
				Label:       "Launch URL",
				Placeholder: "https://",
			})
			@popui.Input(props.Input{
				ID:          "info-url",
				Name:        "info_url",
				Label:       "Info URL",
				Placeholder: "https://",
			})
			@popui.Input(props.Input{
				ID:          "api-url",
				Name:        "api_url",
				Label:       "API URL",
				Placeholder: "https://",
			})
		</div>
	}
}

1234567891011121314151617181920212223242526272829
package examples

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

templ FieldsetTitledExample() {
	<div class="w-full flex flex-col gap-3">
		@popui.TitleGroup(props.TitleGroup{
			Title:       "Categories",
			Description: "Select all that apply",
			Horizontal:  true,
		})
		@popui.Fieldset(props.Fieldset{Variant: props.FieldsetVariantCard}) {
			@popui.Select(props.Select{
				Multiple:    true,
				Name:        "categories",
				Placeholder: "Select categories",
				Options: []props.SelectOption{
					{Value: "document", Label: "Document", Selected: true},
					{Value: "accounting", Label: "Accounting"},
					{Value: "payments", Label: "Payments"},
					{Value: "tax", Label: "Tax"},
				},
			}.GenerateID())
		}
	</div>
}

123456789101112
package examples

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

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

12345678910111213
package examples

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

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

12345678910111213141516171819
package examples

import (
	"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>
}

1234567891011121314
package examples

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

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

12345678910111213
package examples

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

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

123456789101112131415
package examples

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

12345678910111213141516
package examples

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

12345678910111213141516171819202122
package examples

import (
	"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
		}
	}
}

123456789101112131415161718192021222324252627282930
package examples

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

templ FileDownloadExample() {
	@popui.FileDownload() {
		@popui.FileDownloadInfo(props.FileDownloadInfo{
			Label: "dni_back_already_stored.png",
		}) {
			@popui.Avatar(props.Avatar{
				Initial: "PNG",
				Color:   "document-png",
				Size:    props.AvatarSizeLarge,
				Class:   "rounded-md font-mono",
			})
		}
		@popui.Button(props.Button{
			Variant:  "transparent",
			Href:     "#",
			Download: true,
		}) {
			@icons.Download()
			Download
		}
	}
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
package examples

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

templ FileDownloadBorderlessExample() {
	@popui.FileDownload(props.FileDownload{
		Borderless: true,
		Hover:      true,
		Preview:    props.ShowPopover("file-download-preview"),
	}) {
		@popui.FileDownloadInfo(props.FileDownloadInfo{
			Label: "invoice.xml",
			Value: "Jul 14, 2026 at 04:14 PM · 3 KB",
		}) {
			@popui.Avatar(props.Avatar{
				Initial: "XML",
				Color:   "document-xml",
				Size:    props.AvatarSizeLarge,
				Class:   "rounded-md font-mono",
			})
		}
		@popui.Button(props.Button{
			Variant:  "transparent",
			Href:     "#",
			Download: true,
		}) {
			@icons.Download()
			Download
		}
	}
	@popui.Popover(props.Popover{
		ID: "file-download-preview",
	}) {
		@popui.Block() {
			@popui.Title() {
				invoice.xml
			}
			@popui.P() {
				The preview content is managed by the app implementing this
				component: the Preview prop only wires the row's click to your
				own function, which decides what to display.
			}
			@popui.ButtonGroup(props.ButtonGroup{Align: "right"}) {
				@popui.Button(props.Button{
					Variant:             props.ButtonVariantSecondary,
					PopoverTarget:       "file-download-preview",
					PopoverTargetAction: "hide",
				}) {
					Close
				}
			}
		}
	}
}