components

package
v0.1.45 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Oct 6, 2025 License: MIT Imports: 5 Imported by: 0

Documentation

Overview

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func Accordion 

func Accordion(items []AccordionItem, allowMultiple bool) templ.Component

Accordion - Accordion/Collapse component using Alpine.js AllowMultiple: if true, multiple items can be open at once

func Alert 

func Alert(variant string, title string, message string, dismissible bool) templ.Component

Alert - Alert/notification component Variants: info, success, warning, error

func Avatar 

func Avatar(src string, alt string, size string) templ.Component

Avatar - Avatar component Size: sm, md, lg, xl

func Badge 

func Badge(text string, color string) templ.Component

Badge - Colored badge component Colors: gray, red, yellow, green, blue, indigo, purple, pink 

func Breadcrumbs(items []Breadcrumb) templ.Component

Breadcrumbs - Breadcrumb navigation component

func Button 

func Button(text string, variant ButtonVariant, attrs templ.Attributes) templ.Component

Button - Reusable button component with variants

func ButtonWithIcon 

func ButtonWithIcon(text string, icon templ.Component, variant ButtonVariant, attrs templ.Attributes) templ.Component

ButtonWithIcon - Button with icon and text

func Calendar added in v0.1.5 

func Calendar(name string, selectedDate string) templ.Component

Calendar - Interactive calendar component with Alpine.js Usage: 

@ui.Calendar("appointment_date", "2025-10-15")

func Card 

func Card(config CardConfig, content templ.Component) templ.Component

Card - Unified card component with optional header and variants Usage: 

Basic: @ui.Card(CardConfig{}, content)
With Header: @ui.Card(CardConfig{Title: "Title", HeaderAction: action}, content)
Stat Card: @ui.Card(CardConfig{Variant: "stat", StatLabel: "Users", StatValue: "1,234", StatIcon: icon, StatColor: "indigo"}, nil)

func Carousel(id string, items []CarouselItem) templ.Component

Carousel - Image/content carousel component Usage: 

@ui.Carousel("my-carousel", items)

func Checkbox 

func Checkbox(name string, label string, checked bool, attrs templ.Attributes) templ.Component

Checkbox - Custom styled checkbox component with label

func CheckboxWithDescription 

func CheckboxWithDescription(name string, label string, description string, checked bool, attrs templ.Attributes) templ.Component

CheckboxWithDescription - Custom styled checkbox with label and description

func DarkModeToggle 

func DarkModeToggle() templ.Component

DarkModeToggle - Toggle switch for dark/light mode

func DatePicker added in v0.1.3 

func DatePicker(label string, name string, value string, inputType string, required bool, attrs templ.Attributes) templ.Component

DatePicker - Custom date/time picker using our Calendar component and custom time selectors For date type, shows a custom calendar popup For time type, shows custom hour/minute selectors For datetime-local, shows both calendar and time selectors

func Divider 

func Divider(variant string, text string) templ.Component

Divider - Visual separator component Variant: horizontal, vertical WithText: optional text in the middle

func Drawer 

func Drawer(id string, title string, content templ.Component, position string) templ.Component

Drawer - Slide-out drawer component with Alpine.js Position: left, right Usage: 

<div x-data>
  @ui.Button("Open Drawer", ui.ButtonPrimary, templ.Attributes{"@click": "window.dispatchEvent(new CustomEvent('open-drawer', { detail: 'my_drawer' }))"})
  @ui.Drawer("my_drawer", "Drawer Title", DrawerContent(), "right")
</div>

func Dropdown(label string, items []DropdownItem) templ.Component

Dropdown - Dropdown menu component with Alpine.js

func EventCalendar added in v0.1.5 

func EventCalendar(id string, events []CalendarEvent) templ.Component

EventCalendar - Full-featured event calendar component Usage: 

@ui.EventCalendar("my_calendar", events)

func FileInput added in v0.1.3 

func FileInput(label string, name string, multiple bool, required bool, accept string, attrs templ.Attributes) templ.Component

FileInput - File upload input component Usage: 

@ui.FileInput("Upload File", "file", false, false, "", templ.Attributes{})
@ui.FileInput("Upload Images", "images", true, false, "image/*", templ.Attributes{})

func FormGroup 

func FormGroup() templ.Component

FormGroup - Wrapper for form fields with spacing

func IconBell 

func IconBell() templ.Component

IconBell - Bell icon (for timeline)

func IconChart 

func IconChart() templ.Component

IconChart - Chart/Analytics icon (for sidebar)

func IconCheck 

func IconCheck(color string) templ.Component

IconCheck - Check/Active icon

func IconCheckCircle 

func IconCheckCircle() templ.Component

IconCheckCircle - Check circle icon (for timeline)

func IconChevronDown 

func IconChevronDown() templ.Component

IconChevronDown - Chevron down icon

func IconClock 

func IconClock() templ.Component

IconClock - Clock icon (for timeline)

func IconCurrency 

func IconCurrency(color string) templ.Component

IconCurrency - Currency/Money icon

func IconDotsVertical 

func IconDotsVertical() templ.Component

IconDotsVertical - Three dots vertical icon

func IconFolder 

func IconFolder() templ.Component

IconFolder - Folder icon (for sidebar)

func IconHome 

func IconHome() templ.Component

IconHome - Home icon (for sidebar)

func IconMenu 

func IconMenu() templ.Component

IconMenu - Hamburger menu icon (for drawer)

func IconPlus 

func IconPlus() templ.Component

IconPlus - Plus/Add icon

func IconSettings 

func IconSettings() templ.Component

IconSettings - Settings icon (for sidebar)

func IconTrending 

func IconTrending(color string) templ.Component

IconTrending - Trending up icon

func IconUsers 

func IconUsers(color string) templ.Component

IconUsers - Users icon

func List added in v0.1.3 

func List(items []ListItem, variant string) templ.Component

List - Styled list component Usage: 

@ui.List(items, "default")  // default, bordered, divided

func Loading 

func Loading(size string, color string) templ.Component

Loading - Loading spinner component Size: sm, md, lg Color: indigo, blue, gray, etc.

func LoadingButton 

func LoadingButton(text string, loadingText string, variant ButtonVariant, loadingVar string, attrs templ.Attributes) templ.Component

LoadingButton - Button with loading state

func LoadingOverlay 

func LoadingOverlay(message string) templ.Component

LoadingOverlay - Full-screen loading overlay 

func Menu(items []MenuItem, variant string) templ.Component

Menu - Vertical or horizontal navigation menu 

func MenuDivider() templ.Component

MenuDivider - Horizontal line separator between menu sections 

func MenuSection(title string, items []MenuItem) templ.Component

MenuSection - Grouped menu items with optional title 

func MenuTitle(title string) templ.Component

MenuTitle - Section title without items 

func Modal(id string, title string, content templ.Component) templ.Component

Modal - Generic modal component using Alpine.js Usage: 

<div x-data>
  @ui.Button("Open Modal", ui.ButtonPrimary, templ.Attributes{"@click": "window.dispatchEvent(new CustomEvent('open-modal', { detail: 'my_modal' }))"})
  @ui.Modal("my_modal", "Modal Title", ModalContent())
</div>

func Navbar(logo templ.Component, rightContent templ.Component) templ.Component

Navbar - Navigation bar component

func Pagination 

func Pagination(config PaginationConfig) templ.Component

Pagination - Reusable pagination component

func Progress 

func Progress(value int, max int, size string, color string, showLabel bool) templ.Component

Progress - Progress bar component Size: sm, md, lg Color: indigo, green, blue, purple, pink, red, yellow

func ProjectSelector 

func ProjectSelector(currentProject Project, projects []Project) templ.Component

ProjectSelector - Dropdown to switch between projects

func Radio 

func Radio(name string, value string, label string, checked bool, attrs templ.Attributes) templ.Component

Radio - Radio button component with custom styling

func RadioGroup 

func RadioGroup(children templ.Component) templ.Component

RadioGroup - Radio group container

func Rating added in v0.1.3 

func Rating(maxStars int, selectedStars int, name string, interactive bool, attrs templ.Attributes) templ.Component

Rating - Star rating component Usage: 

@ui.Rating(5, 3, "rating", false, templ.Attributes{})  // 5 stars, 3 selected, read-only
@ui.Rating(5, 0, "rating", true, templ.Attributes{})   // 5 stars, interactive

func Select 

func Select(label string, name string, placeholder string, required bool, options []SelectOption) templ.Component

Select - Custom select component with Alpine.js and Tailwind

func SelectOptionItem 

func SelectOptionItem(option SelectOption) templ.Component

SelectOptionItem renders a single option

func SelectOptions 

func SelectOptions(options []SelectOption) templ.Component

SelectOptions renders the list of options 

func Sidebar(header templ.Component, content templ.Component, footer templ.Component) templ.Component

Sidebar - Responsive sidebar component with slot-based content Desktop: Fixed sidebar on the left Mobile: Collapsible drawer Accepts: header (logo), content (navigation/custom), footer (user info)

func SidebarContent 

func SidebarContent(header templ.Component, content templ.Component, footer templ.Component, isMobile bool) templ.Component

SidebarContent - The actual sidebar content (shared between mobile and desktop)

func Slider 

func Slider(name string, label string, min int, max int, value int, step int, attrs templ.Attributes) templ.Component

Slider - Range slider component

func Stepper 

func Stepper(steps []Step, currentStep int) templ.Component

Stepper - Step indicator component

func Switch 

func Switch(name string, label string, description string, checked bool, attrs templ.Attributes) templ.Component

Switch - Toggle switch component

func Table 

func Table(headers []string, content templ.Component) templ.Component

Table - Reusable responsive table component On mobile: hides, on desktop (md+): shows table

func TableCell 

func TableCell(content templ.Component) templ.Component

TableCell - Table cell component

func TableRow 

func TableRow(content templ.Component) templ.Component

TableRow - Table row component

func Tabs 

func Tabs(id string, tabs []Tab) templ.Component

Tabs - Reusable tabs component with Alpine.js Usage: 

@ui.Tabs("my-tabs", []ui.Tab{
  {ID: "tab1", Label: "Overview", Content: OverviewContent()},
  {ID: "tab2", Label: "Settings", Content: SettingsContent()},
})

func TextArea 

func TextArea(label string, name string, placeholder string, rows int, required bool, attrs templ.Attributes) templ.Component

TextArea - Text area component

func TextInput 

func TextInput(label string, inputType string, name string, placeholder string, required bool, attrs templ.Attributes) templ.Component

TextInput - Text input field component

func Timeline 

func Timeline(items []TimelineItem) templ.Component

Timeline - Timeline component

func Toggle 

func Toggle(name string, label string, checked bool, attrs templ.Attributes) templ.Component

Toggle - Toggle switch component (different from Switch) This is a pure on/off toggle with minimal styling

func Tooltip 

func Tooltip(content string, position string, trigger templ.Component) templ.Component

Tooltip - Tooltip component using Alpine.js Position: top, bottom, left, right

Types

type AccordionItem 

type AccordionItem struct {
	ID      string
	Title   string
	Content templ.Component
}

AccordionItem represents a single accordion item 

type Breadcrumb struct {
	Label string
	Href  string
}

Breadcrumb represents a single breadcrumb item

type ButtonVariant 

type ButtonVariant string

ButtonVariant defines button style variants 

const (
	ButtonPrimary   ButtonVariant = "primary"
	ButtonSecondary ButtonVariant = "secondary"
	ButtonDanger    ButtonVariant = "danger"
	ButtonSuccess   ButtonVariant = "success"
)

type CalendarEvent added in v0.1.5 

type CalendarEvent struct {
	ID          string
	Title       string
	Description string
	StartTime   time.Time
	EndTime     time.Time
	AllDay      bool
	Color       string // "blue", "red", "green", "purple", "yellow", "pink"
}

CalendarEvent represents a single event on the calendar

type CardConfig 

type CardConfig struct {
	// Common
	Padding string // "default", "none"

	// Header variant
	Title        string
	HeaderAction templ.Component

	// Stat variant
	Variant   string // "stat" for stat card
	StatLabel string
	StatValue string
	StatIcon  templ.Component
	StatColor string // indigo, green, purple, pink, etc.
}

CardConfig - Configuration for card component

type CarouselItem added in v0.1.3 

type CarouselItem struct {
	ID      string
	Content templ.Component
	Image   string // Optional: direct image URL
	Alt     string // Alt text for image
}

CarouselItem - Single item in carousel 

type DropdownItem struct {
	Label string
	Href  string
}

DropdownItem represents a single dropdown menu item

type ListItem added in v0.1.3 

type ListItem struct {
	Content  templ.Component
	Icon     templ.Component // Optional icon
	Active   bool            // Highlight as active
	Disabled bool            // Disabled state
	Href     string          // Optional link
}

ListItem - Single item in a list 

type MenuItem struct {
	Label  string
	Href   string
	Icon   templ.Component
	Active bool
	Badge  string
}

MenuItem represents a single menu item

type PaginationConfig 

type PaginationConfig struct {
	CurrentPage int
	TotalPages  int
	TotalItems  int
	PerPage     int
	BasePath    string // e.g., "/users"
}

PaginationConfig represents pagination configuration

type Project 

type Project struct {
	ID   int
	Name string
	Slug string
}

Project represents a project for the sidebar selector

type SelectOption 

type SelectOption struct {
	Value string
	Label string
}

SelectOption represents an option in a select dropdown

type SidebarItem 

type SidebarItem = MenuItem

SidebarItem is an alias for MenuItem for backward compatibility

type Step 

type Step struct {
	Label string
}

Step represents a single step in the stepper

type Tab 

type Tab struct {
	ID      string
	Label   string
	Content templ.Component
}

Tab represents a single tab with its content

type TimelineItem 

type TimelineItem struct {
	Title       string
	Description string
	Time        string
	Color       string // indigo, green, blue, purple, pink, red, yellow
	Icon        templ.Component
	Content     templ.Component
}

TimelineItem represents a single timeline item

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.