templUI

https://templui.io/docs
Admin
templUI offers modern, enterprise-grade UI components for the Go ecosystem. Built with Go, Templ,...
Tokens:73,639
Snippets:557
Trust Score:6
Update:3 months ago
Show doc for...
Tokens:
Raw
### Installation and Setup

Source: https://templui.io/docs/components/progress

Commands and code required to install and initialize the component.

```bash
templui add progress
```

```html
<head>
  @progress.Script()
</head>
```

```go
import "github.com/templui/templui/components/progress"
```

--------------------------------

### Installation and Setup

Source: https://templui.io/docs/components/input

Commands and code required to add and initialize the input component.

```bash
templui add input
```

```go
import "github.com/templui/templui/components/input"
```

```html
<head>
  @input.Script()
</head>
```

--------------------------------

### Installation and Setup

Source: https://templui.io/docs/components/tags-input

Commands and layout configuration required to use the component.

```bash
templui add tagsinput
```

```html
<head>
  @tagsinput.Script()
</head>
```

```go
import "github.com/templui/templui/components/tagsinput"
```

--------------------------------

### Toast Installation and Setup

Source: https://templui.io/docs/components/toast

Commands and code required to add and initialize the toast component.

```bash
templui add toast
```

```html
<head>
  @toast.Script()
</head>
```

```go
import "github.com/templui/templui/components/toast"
```

--------------------------------

### Installation and Setup

Source: https://templui.io/docs/components/charts

Commands and template code required to add and initialize the chart component.

```bash
templui add chart
```

```html
<head>
  @chart.Script()
</head>
```

```go
import "github.com/templui/templui/components/chart"
```

--------------------------------

### Initialize templUI Quickstart

Source: https://templui.io/docs/how-to-use

Clone and prepare the templUI quickstart repository for local development.

```bash
git clone https://github.com/templui/templui-quickstart.git myapp
rm -rf myapp/.git
cd myapp
cp .env.example .env
go mod tidy
task dev
```

--------------------------------

### Installation and Setup

Source: https://templui.io/docs/components/avatar

Commands and layout configuration for the Avatar component.

```bash
templui add avatar
```

```html
<head>
  @avatar.Script()
</head>
```

```go
import "github.com/templui/templui/components/avatar"
```

--------------------------------

### Install and Configure Tooltip

Source: https://templui.io/docs/components/tooltip

Commands and layout setup required to initialize the tooltip component.

```bash
templui add tooltip
```

```html
<head>
  @tooltip.Script()
</head>
```

```go
import "github.com/templui/templui/components/tooltip"
```

--------------------------------

### Installation Commands

Source: https://templui.io/docs/components/button

Methods to add the button component to your project.

```bash
templui add button
```

```go
import "github.com/templui/templui/components/button"
```

--------------------------------

### Installation Commands

Source: https://templui.io/docs/components/aspect-ratio

Commands to add the component to your project and import the package.

```bash
templui add aspectratio
```

```go
import "github.com/templui/templui/components/aspectratio"
```

--------------------------------

### Install templUI CLI

Source: https://templui.io/docs/how-to-use

Install the CLI tool via Go and verify the installation.

```bash
go install github.com/templui/templui/cmd/templui@latest
templui --version
```

--------------------------------

### Install and Configure Sheet

Source: https://templui.io/docs/components/sheet

Commands and code snippets for installing the component and loading the required script in your layout.

```bash
templui add sheet
```

```html
<head>
  @sheet.Script()
</head>
```

```go
import "github.com/templui/templui/components/sheet"
```

--------------------------------

### Verify Go Installation

Source: https://templui.io/docs/how-to-use

Check the currently installed version of Go.

```bash
go version  # Check if installed
```

--------------------------------

### Install Task

Source: https://templui.io/docs/how-to-use

Install the Task build tool for managing project tasks.

```bash
go install github.com/go-task/task/v3/cmd/task@latest
```

--------------------------------

### Install Date Picker Component

Source: https://templui.io/docs/components/date-picker

Use the CLI to add the component to your project.

```bash
templui add datepicker
```

--------------------------------

### Install Dropdown Component

Source: https://templui.io/docs/components/dropdown

Use the CLI to add the dropdown component to your project.

```bash
templui add dropdown
```

--------------------------------

### Install the Accordion component

Source: https://templui.io/docs/components/accordion

Use the CLI to add the component to your project.

```bash
templui add accordion
```

--------------------------------

### Time Input Examples

Source: https://templui.io/docs/components/input

Standard and custom-styled time input implementations.

```go
package showcase

import "github.com/templui/templui/components/input"

templ InputTimeDefault() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:  input.TypeTime,
			Value: "10:30",
		})
	</div>
}
```

```go
package showcase

import "github.com/templui/templui/components/input"

templ InputTimeStyled() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:  input.TypeTime,
			Value: "10:30:00",
			Class: "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
			Attributes: templ.Attributes{
				"step": "1",
			},
		})
	</div>
}
```

--------------------------------

### Install the alert component

Source: https://templui.io/docs/components/alert

Commands to add the component to your project and import it into your Go files.

```bash
templui add alert
```

```go
import "github.com/templui/templui/components/alert"
```

--------------------------------

### Icon Sizes Example

Source: https://templui.io/docs/components/icon

Demonstrating different icon sizes using Tailwind sizing utilities.

```go
package showcase

import "github.com/templui/templui/components/icon"

templ IconSizes() {
	<div class="flex flex-wrap gap-2">
		@icon.House(icon.Props{Class: "size-4"})
		@icon.House(icon.Props{Class: "size-8"})
		@icon.House(icon.Props{Class: "size-12"})
	</div>
}
```

--------------------------------

### Install and Import Popover

Source: https://templui.io/docs/components/popover

Use the CLI to add the component and import the package in your Go files.

```bash
templui add popover
```

```go
import "github.com/templui/templui/components/popover"
```

--------------------------------

### Profile Skeleton Example

Source: https://templui.io/docs/components/skeleton

Example of a profile-style loading state using a circular avatar and text lines.

```templ
package showcase

import "github.com/templui/templui/components/skeleton"

templ SkeletonProfile() {
	<div class="flex items-center gap-4 w-full max-w-sm">
		@skeleton.Skeleton(skeleton.Props{Class: "h-12 w-12 rounded-full"})
		<div class="space-y-2 w-full">
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-3/4"})
		</div>
	</div>
}
```

--------------------------------

### File Input Example

Source: https://templui.io/docs/components/input

Implementation of an input field for file uploads.

```go
package showcase

import "github.com/templui/templui/components/input"

templ InputFile() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{Type: input.TypeFile})
	</div>
}
```

--------------------------------

### Card Skeleton Example

Source: https://templui.io/docs/components/skeleton

Example of a card-style loading state with an image placeholder and text content.

```templ
package showcase

import "github.com/templui/templui/components/skeleton"

templ SkeletonCard() {
	<div class="p-4 w-full max-w-sm">
		@skeleton.Skeleton(skeleton.Props{Class: "h-[200px] w-full rounded-md mb-4"})
		<div class="space-y-2">
			@skeleton.Skeleton(skeleton.Props{Class: "h-5 w-2/3"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-3/4"})
		</div>
	</div>
}
```

--------------------------------

### Install Copy Button

Source: https://templui.io/docs/components/copy-button

Command to add the component to the project.

```bash
templui add copybutton
```

--------------------------------

### Install and configure Textarea

Source: https://templui.io/docs/components/textarea

Commands and snippets for adding the component and loading required scripts.

```bash
templui add textarea
```

```html
<head>
  @textarea.Script()
</head>
```

```go
import "github.com/templui/templui/components/textarea"
```

--------------------------------

### Install templ CLI

Source: https://templui.io/docs/how-to-use

Install the latest version of the templ CLI tool.

```bash
go install github.com/a-h/templ/cmd/templ@latest
```

--------------------------------

### Installation and Import

Source: https://templui.io/docs/components/skeleton

Commands and import statements required to add the skeleton component to your project.

```bash
templui add skeleton
```

```go
import "github.com/templui/templui/components/skeleton"
```

--------------------------------

### Install the table component

Source: https://templui.io/docs/components/table

Use the CLI or manual import to add the table component to your project.

```bash
templui add table
```

```go
import "github.com/templui/templui/components/table"
```

--------------------------------

### Installation and Script Loading

Source: https://templui.io/docs/components/time-picker

Commands to add the component and instructions for loading the required script in your layout.

```bash
templui add timepicker
```

```html
<head>
  @timepicker.Script()
</head>
```

```go
import "github.com/templui/templui/components/timepicker"
```

--------------------------------

### Install and Import Collapsible

Source: https://templui.io/docs/components/collapsible

Use the CLI to add the component and import the package in your project.

```bash
templui add collapsible
```

```go
import "github.com/templui/templui/components/collapsible"
```

--------------------------------

### Install the Calendar component

Source: https://templui.io/docs/components/calendar

Use the CLI command to add the calendar component to your project.

```bash
templui add calendar
```

--------------------------------

### Install and Import Card Component

Source: https://templui.io/docs/components/card

Use the CLI to add the component and import the package into your Go project.

```bash
templui add card
```

```go
import "github.com/templui/templui/components/card"
```

--------------------------------

### Install Label Component

Source: https://templui.io/docs/components/label

Use the CLI to add the Label component to your project.

```bash
templui add label
```

--------------------------------

### Install Switch Component

Source: https://templui.io/docs/components/switch

Commands and import syntax for adding the switch component to a project.

```bash
templui add switch
```

```go
import switchcomp "github.com/templui/templui/components/switch"
```

```go
import switchcomp "your-project/components/switch"
```

--------------------------------

### Dashboard Skeleton Example

Source: https://templui.io/docs/components/skeleton

Example of a complex dashboard layout using loops to generate multiple skeleton elements.

```templ
package showcase

import "github.com/templui/templui/components/skeleton"

templ SkeletonDashboard() {
	<div>
		<div class="grid gap-6 md:grid-cols-3">
			for i := 0; i < 3; i++ {
				<div class="p-4">
					@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-20 mb-2"})
					@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-24 mb-4"})
					<div class="flex items-center gap-2">
						@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-12"})
						@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-4"})
					</div>
				</div>
			}
		</div>
		<div class="mt-4 p-4">
			@skeleton.Skeleton(skeleton.Props{Class: "h-5 w-1/3 mb-6"})
			@skeleton.Skeleton(skeleton.Props{Class: "h-[240px] w-full rounded-md"})
		</div>
	</div>
}
```

--------------------------------

### templUI Configuration File

Source: https://templui.io/docs/how-to-use

Example of the .templui.json configuration file structure.

```json
{
  "componentsDir": "components",
  "utilsDir": "utils",
  "moduleName": "your-app/module",
  "jsDir": "assets/js",
  "jsPublicPath": "/assets/js"
}
```

--------------------------------

### Install Radio Component

Source: https://templui.io/docs/components/radio

Commands to add the radio component to your project.

```bash
templui add radio
```

```go
import "github.com/templui/templui/components/radio"
```

--------------------------------

### Install and Configure Rating

Source: https://templui.io/docs/components/rating

Commands and layout requirements for setting up the rating component.

```bash
templui add rating
```

```html
<head>
  @rating.Script()
</head>
```

```go
import "github.com/templui/templui/components/rating"
```

--------------------------------

### Install Dialog Component

Source: https://templui.io/docs/components/dialog

Use the CLI to add the dialog component to your project.

```bash
templui add dialog
```

--------------------------------

### Install Tabs Component

Source: https://templui.io/docs/components/tabs

Use the CLI to add the tabs component to your project.

```bash
templui add tabs
```

--------------------------------

### Install Sidebar Component

Source: https://templui.io/docs/components/sidebar

Use the CLI to add the sidebar component to your project.

```bash
templui add sidebar
```

--------------------------------

### Install TemplUI Components

Source: https://templui.io/docs/how-to-use

Use the CLI to add specific components, all components, or components from specific versions.

```bash
# Specific components
templui add button card

# All components
templui add "*"

# From specific version
templui add@main button
templui add@v0.84.0 dialog
```

--------------------------------

### Install Pagination Component

Source: https://templui.io/docs/components/pagination?page=2

Commands to add the pagination component to your project and import the package.

```bash
templui add pagination
```

```go
import "github.com/templui/templui/components/pagination"
```

--------------------------------

### Install Separator Component

Source: https://templui.io/docs/components/separator

Commands to add the component to your project and import the package.

```bash
templui add separator
```

```go
import "github.com/templui/templui/components/separator"
```

--------------------------------

### Install Carousel Component

Source: https://templui.io/docs/components/carousel

Use the CLI to add the carousel component to your project.

```bash
templui add carousel
```

--------------------------------

### Install Form Components

Source: https://templui.io/docs/components/form

Add the form component to your project using the CLI or import it directly in your Go code.

```bash
templui add form
```

```go
import "github.com/templui/templui/components/form"
```

--------------------------------

### Filled Icon Example

Source: https://templui.io/docs/components/icon

Applying fill and stroke colors to an icon.

```go
package showcase

import "github.com/templui/templui/components/icon"

templ IconFilled() {
	@icon.Triangle(icon.Props{Class: "size-6 fill-orange-500 stroke-orange-500"})
}
```

--------------------------------

### Install Checkbox Component

Source: https://templui.io/docs/components/checkbox

Use the CLI to add the checkbox component to your project.

```bash
templui add checkbox
```

--------------------------------

### Implement a Default Sidebar

Source: https://templui.io/docs/components/sidebar

This example demonstrates the structure of a sidebar using layout, header, content, groups, and nested menu items.

```templ
package showcase

import "github.com/templui/templui/components/sidebar"
import "github.com/templui/templui/components/icon"
import "github.com/templui/templui/components/collapsible"
import "github.com/templui/templui/components/dropdown"
import "github.com/templui/templui/components/avatar"

templ SidebarDefault() {
	@sidebar.Layout() {
		@sidebar.Sidebar(sidebar.Props{
			Collapsible: sidebar.CollapsibleIcon,
			Variant:     sidebar.VariantFloating,
		}) {
			@sidebar.Header() {
				@sidebar.Menu() {
					@sidebar.MenuItem() {
						@sidebar.MenuButton(sidebar.MenuButtonProps{
							Href: "#",
						}) {
							@icon.LayoutPanelLeft(icon.Props{Class: "size-4"})
							<span class="font-semibold">Acme Inc</span>
						}
					}
				}
			}
			@sidebar.Content() {
				@sidebar.Group() {
					@sidebar.GroupLabel() {
						Platform
					}
					@sidebar.Menu() {
						@sidebar.MenuItem() {
							@sidebar.MenuButton(sidebar.MenuButtonProps{
								Href:    "#",
								Tooltip: "Home",
							}) {
								@icon.House(icon.Props{Class: "size-4"})
								<span>Home</span>
							}
						}
						@sidebar.MenuItem() {
							@sidebar.MenuButton(sidebar.MenuButtonProps{
								Href:    "#",
								Tooltip: "Inbox",
							}) {
								@icon.Inbox(icon.Props{Class: "size-4"})
								<span>Inbox</span>
								@sidebar.MenuBadge() {
									3
								}
							}
						}
						@sidebar.MenuItem() {
							@collapsible.Collapsible(collapsible.Props{
								Open:  true,
								Class: "group/collapsible w-full",
							}) {
								@collapsible.Trigger() {
									@sidebar.MenuButton(sidebar.MenuButtonProps{
										Tooltip: "Documents",
									}) {
										@icon.FileText(icon.Props{Class: "size-4"})
										<span>Documents</span>
										@icon.ChevronRight(icon.Props{
											Class: "ml-auto size-4 transition-transform group-data-[tui-collapsible-state=open]/collapsible:rotate-90",
										})
									}
								}
								@collapsible.Content() {
									@sidebar.MenuSub() {
										@sidebar.MenuSubItem() {
											@sidebar.MenuSubButton(sidebar.MenuSubButtonProps{
												Href: "#",
											}) {
												<span>Reports</span>
											}
										}
										@sidebar.MenuSubItem() {
											@sidebar.MenuSubButton(sidebar.MenuSubButtonProps{
												Href: "#",
											}) {
												<span>Invoices</span>
											}
										}
										@sidebar.MenuSubItem() {
											@sidebar.MenuSubButton(sidebar.MenuSubButtonProps{
												Href:     "#",
												IsActive: true,
											}) {
												<span>Receipts</span>
											}
										}
									}
								}
							}
						}
					}
				}
				@sidebar.Separator()
				@sidebar.Group() {
					@sidebar.GroupLabel() {
						Projects
					}
					@sidebar.Menu() {
						@sidebar.MenuItem() {
							@sidebar.MenuButton(sidebar.MenuButtonProps{
								Href:    "#",
								Tooltip: "Project Alpha",
							}) {
								@icon.Folder(icon.Props{Class: "size-4"})
								<span>Project Alpha</span>
								@sidebar.MenuBadge() {
									12
								}
							}
						}
						@sidebar.MenuItem() {
							<div class="w-full">
								@sidebar.MenuButton(sidebar.MenuButtonProps{
									Tooltip: "Project Beta",
								}) {
									@icon.Folder(icon.Props{Class: "size-4"})
									<span>Project Beta</span>
								}
								@sidebar.MenuSub() {
									@sidebar.MenuSubItem() {
										@sidebar.MenuSubButton(sidebar.MenuSubButtonProps{
											Href: "#",
										}) {
											<span>Overview</span>
										}
									}
									@sidebar.MenuSubItem() {
										@sidebar.MenuSubButton(sidebar.MenuSubButtonProps{
											Href: "#",
										}) {
											<span>Analytics</span>
										}
									}
									@sidebar.MenuSubItem() {
										@sidebar.MenuSubButton(sidebar.MenuSubButtonProps{
											Href: "#",
										}) {
											<span>Reports</span>
										}
									}
								}
							</div>
						}
					}
				}
				@sidebar.Separator()
				@sidebar.Group() {
					@sidebar.Menu() {
						@sidebar.MenuItem() {
							@sidebar.MenuButton(sidebar.MenuButtonProps{
								Href:    "#",
								Tooltip: "Team",
							}) {
								@icon.Users(icon.Props{Class: "size-4"})
								<span>Team</span>
							}
						}
						@sidebar.MenuItem() {
							@collapsible.Collapsible(collapsible.Props{
								Open:  false,
								Class: "group/collapsible w-full",
							}) {
								@collapsible.Trigger() {
									@sidebar.MenuButton(sidebar.MenuButtonProps{
										Tooltip: "Settings",
									}) {
										@icon.Settings(icon.Props{Class: "size-4"})
										<span>Settings</span>
										@icon.ChevronRight(icon.Props{

```

--------------------------------

### Implement Card with Image

Source: https://templui.io/docs/components/card

Example of a card featuring a top image with lazy loading and nested components.

```go
package showcase

import (
	"github.com/templui/templui/components/aspectratio"
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/card"
)

templ CardWithImage() {
	<div class="w-full max-w-sm">
		@card.Card() {
			<div class="overflow-hidden w-full rounded-t-lg">
				@aspectratio.AspectRatio(aspectratio.Props{
					ID:    "top-media-aspect",
					Ratio: aspectratio.RatioVideo,
					Class: "h-full w-full",
				}) {
					<img
						src="/assets/img/card_placeholder.jpeg"
						alt="Card image"
						loading="lazy"
						class="h-full w-full object-cover"
					/>
				}
			</div>
			@card.Header() {
				@card.Title() {
					Featured Card
				}
				@card.Description() {
					With top image
				}
			}
			@card.Content() {
				<p>This card shows top image usage with lazy loading for better performance.</p>
			}
			@card.Footer() {
				@button.Button() {
					Learn more
				}
			}
		}
	</div>
}
```

--------------------------------

### Install and configure Hover Card

Source: https://templui.io/docs/components/hover-card

Commands and imports required to add and initialize the component.

```bash
templui add hovercard
```

```html
<head>
  @hovercard.Script()
</head>
```

```go
import "github.com/templui/templui/components/hovercard"
```

--------------------------------

### Checkbox Form Example

Source: https://templui.io/docs/components/checkbox

Demonstrates a form layout using checkboxes with various states like checked and disabled.

```go
package showcase

import (
	"github.com/templui/templui/components/checkbox"
	"github.com/templui/templui/components/form"
)

templ CheckboxForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.ItemFlex() {
				@checkbox.Checkbox(
					checkbox.Props{
						Name:    "interests",
						Value:   "design",
						ID:      "c1",
						Checked: true,
					},
				)
				@form.Label(form.LabelProps{
					For: "c1",
				}) {
					Dessign and UX
				}
			}
			@form.ItemFlex() {
				@checkbox.Checkbox(checkbox.Props{
					Name:     "interests",
					Value:    "development",
					ID:       "c2",
					Disabled: true,
				})
				@form.Label(form.LabelProps{
					For: "c2",
				}) {
					Development (Coming Soon)
				}
			}
			@form.ItemFlex() {
				@checkbox.Checkbox(checkbox.Props{
					Name:  "interests",
					Value: "marketing",
					ID:    "c3",
				})
				@form.Label(form.LabelProps{
					For: "c3",
				}) {
					Business and Marketing
				}
			}
			@form.Description() {
				Choose all areas that interest you.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please select at least one interest.
			}
		}
	</div>
}
```

--------------------------------

### Implement Badge Variants

Source: https://templui.io/docs/components/badge

Examples of using different badge variants including secondary, outline, and destructive styles.

```go
package showcase

import "github.com/templui/templui/components/badge"

templ BadgeSecondary() {
	@badge.Badge(badge.Props{
		Variant: badge.VariantSecondary,
	}) {
		Secondary
	}
}
```

```go
package showcase

import "github.com/templui/templui/components/badge"

templ BadgeOutline() {
	@badge.Badge(badge.Props{
		Variant: badge.VariantOutline,
	}) {
		Outline
	}
}
```

```go
package showcase

import "github.com/templui/templui/components/badge"

templ BadgeDestructive() {
	@badge.Badge(badge.Props{
		Variant: badge.VariantDestructive,
	}) {
		Destructive
	}
}
```

--------------------------------

### Update Installed Components

Source: https://templui.io/docs/how-to-use

Update all installed components or specific ones, optionally forcing the update.

```bash
templui --installed add              # Update all installed components
templui --installed add@v1.0.0      # Update to specific version
templui --force --installed add       # Force without prompts
```

```bash
templui add carousel       # Prompts for confirmation
templui --force add carousel    # Force without prompts
```

--------------------------------

### Import and Initialize Script

Source: https://templui.io/docs/components/date-picker

Import the package and include the required script in the document head.

```go
import "github.com/templui/templui/components/datepicker"
```

```html
<head>
  @datepicker.Script()
</head>
```

--------------------------------

### Disabled Input Example

Source: https://templui.io/docs/components/input

Input field configured with the disabled state.

```go
package showcase

import "github.com/templui/templui/components/input"

templ InputDisabled() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:        input.TypeEmail,
			Placeholder: "Email",
			Disabled:    true,
		},
		)
	</div>
}
```

--------------------------------

### Button Variants

Source: https://templui.io/docs/components/button

Examples of different visual styles for the button component.

```templ
package showcase

import "github.com/templui/templui/components/button"

templ ButtonPrimary() {
	@button.Button() {
		Primary
	}
}
```

```templ
package showcase

import "github.com/templui/templui/components/button"

templ ButtonSecondary() {
	@button.Button(button.Props{
		Variant: button.VariantSecondary,
	}) {
		Secondary
	}
}
```

```templ
package showcase

import "github.com/templui/templui/components/button"

templ ButtonDestructive() {
	@button.Button(button.Props{
		Variant: button.VariantDestructive,
	}) {
		Destructive
	}
}
```

```templ
package showcase

import "github.com/templui/templui/components/button"

templ ButtonOutline() {
	@button.Button(button.Props{
		Variant: button.VariantOutline,
	}) {
		Outline
	}
}
```

```templ
package showcase

import "github.com/templui/templui/components/button"

templ ButtonGhost() {
	@button.Button(button.Props{
		Variant: button.VariantGhost,
	}) {
		Ghost
	}
}
```

```templ
package showcase

import "github.com/templui/templui/components/button"

templ ButtonLink() {
	@button.Button(button.Props{
		Variant: button.VariantLink,
	}) {
		Link
	}
}
```

--------------------------------

### Initialize templUI Project

Source: https://templui.io/docs/how-to-use

Create the .templui.json configuration file in the project root.

```bash
templui init
```

--------------------------------

### Default Aspect Ratio Usage

Source: https://templui.io/docs/components/aspect-ratio

Demonstrates how to implement the Aspect Ratio component with a video ratio and custom styling.

```go
package showcase

import "github.com/templui/templui/components/aspectratio"

templ AspectRatioDefault() {
	@aspectratio.AspectRatio(aspectratio.Props{
		Ratio: aspectratio.RatioVideo,
		Class: "rounded-md overflow-hidden",
	}) {
		<img
			src="/assets/img/aspect_ratio_placeholder.jpeg"
			alt="Example image"
			class="h-full w-full object-cover"
		/>
	}
}
```

--------------------------------

### List Available Components

Source: https://templui.io/docs/how-to-use

View available components for the latest or a specific version.

```bash
templui list              # Latest version
templui list@v0.1.0       # Specific version
```

--------------------------------

### Create a Card component in Templ

Source: https://templui.io/docs/components/card

Demonstrates how to structure a card with a header, content area containing inputs and select boxes, and a footer with action buttons.

```go
package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/input"
	"github.com/templui/templui/components/label"
	"github.com/templui/templui/components/selectbox"
)

templ CardDefault() {
	<div class="w-full max-w-sm">
		@card.Card() {
			@card.Header() {
				@card.Title() {
					Create Project
				}
				@card.Description() {
					Deploy your new project in one-click.
				}
			}
			@card.Content() {
				<div class="flex flex-col gap-4">
					<div class="w-full max-w-sm grid gap-2">
						@label.Label(label.Props{
							For: "name",
						}) {
							Name
						}
						@input.Input(input.Props{
							ID:          "name",
							Placeholder: "Enter project name",
						})
					}
					<div class="w-full max-w-sm grid gap-2">
						@label.Label(label.Props{
							For: "service",
						}) {
							Service
						}
						@selectbox.SelectBox() {
							@selectbox.Trigger(selectbox.TriggerProps{
								ID: "service",
							}) {
								@selectbox.Value(selectbox.ValueProps{
									Placeholder: "Select",
								})
							}
							@selectbox.Content() {
								@selectbox.Group() {
									@selectbox.Item(selectbox.ItemProps{
										Value: "postgres",
									}) {
										PostgreSQL
									}
									@selectbox.Item(selectbox.ItemProps{
										Value: "mysql",
									}) {
										MySQL
									}
									@selectbox.Item(selectbox.ItemProps{
										Value: "sqlite",
									}) {
										SQLite
									}
								}
							}
						}
					}
				}
			}
			@card.Footer(card.FooterProps{
				Class: "flex justify-between",
			}) {
				@button.Button(button.Props{
					Variant: button.VariantSecondary,
				}) {
					Cancel
				}
				@button.Button() {
					Deploy
				}
			}
		}
	</div>
}
```

--------------------------------

### Import and Use Components

Source: https://templui.io/docs/how-to-use

Import the component package and invoke the component within your templates.

```go
import "your-app/components/button"
```

```templ
@button.Button() {
  Click me
}
```

--------------------------------

### Install Badge Component

Source: https://templui.io/docs/components/badge

Commands and imports required to add the badge component to your project.

```bash
templui add badge
```

```go
import "github.com/templui/templui/components/badge"
```

--------------------------------

### Use Switch in Forms

Source: https://templui.io/docs/components/switch

Example of using the switch component within a form layout.

```go
package showcase

import (
	"github.com/templui/templui/components/form"
	// "switch" is a reserved Go keyword, so we use an alias
	switchcomp "github.com/templui/templui/components/switch"
)

templ SwitchForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.ItemFlex() {
				@switchcomp.Switch(switchcomp.Props{
					ID:   "airplane-mode",
					Name: "airplane",
				})
				@form.Label(form.LabelProps{
					For: "airplane-mode",
				}) {
					Airplane Mode
				}
			}
			@form.ItemFlex() {
				@switchcomp.Switch(switchcomp.Props{
					ID:       "wifi-mode",
					Name:     "wifi",
					Disabled: true,
				})
				@form.Label(form.LabelProps{
					For: "wifi-mode",
				}) {
					Wi-Fi
				}
			}
			@form.ItemFlex() {
				@switchcomp.Switch(switchcomp.Props{
					ID:      "bluetooth-mode",
					Name:    "bluetooth",
					Checked: true,
				})
				@form.Label(form.LabelProps{
					For: "bluetooth-mode",
				}) {
					Bluetooth
				}
			}
			@form.Description() {
				Manage your devices connectivity options.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please configure your connectivity settings.
			}
		}
	</div>
}
```

--------------------------------

### Colored Icon Example

Source: https://templui.io/docs/components/icon

Applying color to an icon using Tailwind utility classes.

```go
package showcase

import "github.com/templui/templui/components/icon"

templ IconColored() {
	@icon.Heart(icon.Props{Class: "size-6 text-red-500"})
}
```

--------------------------------

### Implement an Input Form with Templ

Source: https://templui.io/docs/components/form

Use the form components to wrap input fields with labels, descriptions, and validation messages.

```go
package showcase

import (
	"github.com/templui/templui/components/form"
	"github.com/templui/templui/components/input"
)

templ InputForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.Label(form.LabelProps{
				For: "email-form",
			}) {
				Email
			}
			@input.Input(input.Props{
				ID:          "email-form",
				Type:        input.TypeEmail,
				Placeholder: "m@example.com",
				HasError:    true,
			})
			@form.Description() {
				Enter your email address for notifications.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please enter a valid email address
			}
		}
	</div>
}
```

--------------------------------

### Serve Assets with Go

Source: https://templui.io/docs/how-to-use

Implement a route handler to serve static assets and TemplUI JavaScript files.

```go
func setupAssetsRoutes(mux *http.ServeMux) {
  isDevelopment := os.Getenv("GO_ENV") != "production"

  assetHandler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    if isDevelopment {
      w.Header().Set("Cache-Control", "no-store")
    } else {
      w.Header().Set("Cache-Control", "public, max-age=31536000")
    }

    var fs http.Handler
    if isDevelopment {
      fs = http.FileServer(http.Dir("./assets"))
    } else {
      fs = http.FileServer(http.FS(assets.Assets))
    }

    fs.ServeHTTP(w, r)
  })

  mux.Handle("GET /assets/", http.StripPrefix("/assets/", assetHandler))
}
```

--------------------------------

### Install and Configure Slider

Source: https://templui.io/docs/components/slider

Commands and layout configuration required to add and initialize the slider component.

```bash
templui add slider
```

```html
<head>
  @slider.Script()
</head>
```

```go
import "github.com/templui/templui/components/slider"
```

--------------------------------

### Execute Development Tasks

Source: https://templui.io/docs/how-to-use

Command to initiate the development environment defined in the Taskfile.

```bash
task dev
```

--------------------------------

### Progress Sizes

Source: https://templui.io/docs/components/progress

Demonstrates different size configurations for the progress bar.

```go
package showcase

import "github.com/templui/templui/components/progress"

templ ProgressSizes() {
	<div class="space-y-6 w-full max-w-sm">
		@progress.Progress(progress.Props{
			Value: 50,
			Size:  progress.SizeSm,
		})
		@progress.Progress(progress.Props{
			Value: 65,
			Size:  progress.SizeLg,
		})
		@progress.Progress(progress.Props{
			Value: 80,
			Size:  progress.SizeLg,
		})
	</div>
}
```

--------------------------------

### Server-Sent Events Integration

Source: https://templui.io/docs/components/progress

Example of a Go handler for streaming progress updates via SSE.

```go
// Server-side Go code
func SSEHandler(w http.ResponseWriter, r *http.Request) {
	// Set SSE headers
	w.Header().Set("Content-Type", "text/event-stream")
	w.Header().Set("Cache-Control", "no-cache")
	w.Header().Set("Connection", "keep-alive")
	
	// Send progress updates
	for i := 0; i <= 100; i += 10 {
		fmt.Fprintf(w, "data: {\"progress\": %d}\n\n", i)
		w.(http.Flusher).Flush()
		time.Sleep(1 * time.Second)
	}
}
```

--------------------------------

### Indeterminate Checkbox Example

Source: https://templui.io/docs/components/checkbox

Shows how to implement a parent checkbox that controls a group of child checkboxes.

```go
package showcase

import (
	"github.com/templui/templui/components/checkbox"
	"github.com/templui/templui/components/label"
)

templ CheckboxIndeterminate() {
	<div class="flex flex-col gap-4">
		<div class="flex items-center gap-3 border-b pb-3">
			@checkbox.Checkbox(checkbox.Props{
				ID:          "select-all",
				Group:       "items",
				GroupParent: true,
			})
			@label.Label(label.Props{
				For:   "select-all",
				Class: "font-medium",
			}) {
				Select all
			}
		</div>
		<div class="flex flex-col gap-3 pl-6">
			<div class="flex items-center gap-3">
				@checkbox.Checkbox(checkbox.Props{
					ID:      "item-1",
					Name:    "items",
					Value:   "1",
					Group:   "items",
					Checked: true,
				})
				@label.Label(label.Props{
					For: "item-1",
				}) {
					Item 1
				}
			</div>
			<div class="flex items-center gap-3">
				@checkbox.Checkbox(checkbox.Props{
					ID:      "item-2",
					Name:    "items",
					Value:   "2",
					Group:   "items",
					Checked: true,
				})
				@label.Label(label.Props{
					For: "item-2",
				}) {
					Item 2
				}
			</div>
			<div class="flex items-center gap-3">
				@checkbox.Checkbox(checkbox.Props{
					ID:    "item-3",
					Name:  "items",
					Value: "3",
					Group: "items",
				})
				@label.Label(label.Props{
					For: "item-3",
				}) {
					Item 3
				}
			</div>
		</div>
	</div>
}
```

--------------------------------

### Load Component JavaScript

Source: https://templui.io/docs/how-to-use

Import the component package and render the script tag in the HTML head.

```go
import (
  "your-app/components/datepicker"
)
```

```html
<head>
  @datepicker.Script()
</head>
```

--------------------------------

### Multi-step Form Integration

Source: https://templui.io/docs/components/progress

Example of using the component within a multi-step form context using HTMX.

```html
// Client-side approach
<div data-current-step="1" data-total-steps="4">
    @progress.Progress(progress.Props{
        Value: 25, // 1 of 4 steps = 25%
        Label: "Step 1 of 4",
        ShowValue: true,
    })
    
    // Form steps
</div>

// HTMX approach
<button 
    hx-get="/form/step/2" 
    hx-target="#form-container"
    class="px-4 py-2 bg-primary text-white rounded"
>
    Next
</button>
```

--------------------------------

### Implement a Basic Carousel

Source: https://templui.io/docs/components/carousel

Example showing the structure of a carousel with three slides, navigation buttons, and indicators.

```templ
package showcase

import "github.com/templui/templui/components/carousel"
import "github.com/templui/templui/components/card"

templ CarouselDefault() {
	@carousel.Carousel(carousel.Props{
		Class: "rounded-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@CarouselSlide("Slide 1", "This is the first slide")
			}
			@carousel.Item() {
				@CarouselSlide("Slide 2", "This is the second slide")
			}
			@carousel.Item() {
				@CarouselSlide("Slide 3", "This is the third slide")
			}
		}
		@carousel.Previous()
		@carousel.Next()
		@carousel.Indicators(carousel.IndicatorsProps{
			Count: 3,
		})
	}
}

templ CarouselSlide(title, description string) {
	@card.Card() {
		@card.Content() {
			<div class={ "w-full h-96 flex items-center justify-center" }>
				<div class="text-center">
					<h2 class="text-3xl font-bold mb-2">{ title }</h2>
					<p class="text-xl">{ description }</p>
				</div>
			</div>
		}
	}
}
```
Tokens:
Raw