gluxui

package module
v0.2.0 Latest Latest
Warning

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

 Go to latest Published: May 8, 2026 License: MIT Imports: 18 Imported by: 0

README

GluxUI

Flutter-inspired UI library for Go web applications with server-side rendering

Beta Status Go Version License

At a Glance

GluxUI brings Flutter's declarative UI patterns to Go web development:

  • Flutter-like Widget Composition - Familiar, intuitive patterns for building UIs
  • Server-Side Rendering - Performance and SEO benefits with HTMX enhancement
  • Type-Safe APIs - Compile-time validation for all widget properties
  • Zero Client Dependencies - Pure Go with embedded assets, single binary deployment
  • Theme System - Light/dark themes with runtime switching
  • Callback-Based Actions - Pure business logic, no HTTP boilerplate

GluxUI Screenshot

Quick Start (5 minutes)

Your First App

Create main.go:

package main

import (
    "context"
    "fmt"
    "gitlab.com/osechet/gluxui"
)

var count int

func main() {
    app := gluxui.NewApp(gluxui.AppConfig{
        Title: "Hello GluxUI",
        Port:  8080,
        Body: func(ctx context.Context) gluxui.Widget {
            return gluxui.Container(gluxui.ContainerConfig{
                Padding: gluxui.AllEdges(40),
                Children: []gluxui.Widget{
                    gluxui.Column(gluxui.ColumnConfig{
                        Gap: 20,
                        MainAxis: gluxui.AlignmentCenter,
                        CrossAxis: gluxui.CrossAlignmentCenter,
                        Children: []gluxui.Widget{
                            gluxui.Heading("Hello, GluxUI!", gluxui.HeadingLevel1),
                            gluxui.Text(fmt.Sprintf("Button clicked %d times", count)),
                            gluxui.Button("Click Me",
                                gluxui.WithButtonVariant(gluxui.ButtonVariantPrimary),
                                gluxui.WithButtonOnClick(func(ctx gluxui.ActionContext) (*gluxui.ActionResult, error) {
                                    count++
                                    ctx.Writer.Header().Set("HX-Refresh", "true")
                                    return nil, nil
                                }),
                            ),
                        },
                    }),
                },
            })
        },
    })

    if err := app.Start(); err != nil {
        panic(err)
    }
}

Create go module:

go mod init hello-gluxui

Install gluxui:

go get gitlab.com/osechet/gluxu
Run It
go run main.go

Open http://localhost:8080 in your browser and click the button!

What Just Happened?
  • App Widget - Root application with configuration
  • BodyBuilder - Function that builds the UI tree on each request
  • Widget Composition - Container → Column → widgets arranged vertically
  • Button Callback - Pure Go function handling clicks
  • HX-Refresh - HTMX header triggering page refresh to show updated count

Core Concepts

Widgets

Widgets are the building blocks of GluxUI applications. Every UI element is a widget that can be composed with other widgets:

gluxui.Button("Save",
    gluxui.WithButtonVariant(gluxui.ButtonVariantPrimary),
    gluxui.WithButtonOnClick(handleSave),
)

Widget Categories:

  • Layout - Container, Column, Row, Card, Panel
  • Display - Text, Heading, Icon, Image, Avatar
  • Interactive - Button, TextField, Checkbox, Select
  • High-Level - NavigationRail, NavigationBar, Modal
Composition

Build complex UIs by composing simple widgets, Flutter-style:

gluxui.Column(gluxui.ColumnConfig{
    Gap: 20,
    Children: []gluxui.Widget{
        gluxui.Heading("Dashboard", gluxui.HeadingLevel1),
        gluxui.Card(gluxui.CardConfig{
            Children: []gluxui.Widget{
                gluxui.Text("Card content here"),
            },
        }),
    },
})
Callbacks

Interactive widgets accept callback functions for handling user actions:

func handleClick(ctx gluxui.ActionContext) (*gluxui.ActionResult, error) {
    // Your business logic here
    // ctx.GetFormValue() for form data
    // ctx.Writer for HTTP response control
    return nil, nil
}

ActionResult enables targeted DOM updates without full page refreshes:

return &gluxui.ActionResult{
    TargetID: "counter-display",
    Widget:   updatedWidget(),
    SwapMode: "outerHTML",
}, nil
Themes

GluxUI includes a comprehensive theme system with light/dark modes:

// Switch themes
gluxui.SwitchToLightTheme()
gluxui.SwitchToDarkTheme()

// Use theme-aware colors
gluxui.Button("Primary",
    gluxui.WithButtonVariant(gluxui.ButtonVariantPrimary), // Adapts to theme
)

// Create custom themes
customTheme := gluxui.NewThemeBuilder("MyTheme").
    WithPrimaryColor(gluxui.NewColor("#e11d48")).
    Build()
gluxui.SetTheme(customTheme)

Documentation

Getting Started
Tutorials

Step-by-step tutorials from beginner to intermediate:

Widget Reference
API Reference
Coming Soon
  • Best Practices - Patterns and guidelines for production apps (planned)
  • Troubleshooting - Common issues and solutions (planned)

Examples

Explore working examples to learn common patterns:

Example Description Key Concepts
Catalog 15-page comprehensive showcase of all widgets All widgets, NavigationRail, theme switching
Clicker Interactive counter with state management BodyBuilder, ActionResult, callbacks
Form Contact form with validation TextField, Checkbox, server-side validation
Navigation Multi-page application NavigationRail, content-first routing
NavigationBar Bottom navigation demo NavigationBar, mobile-style navigation

Each example includes a detailed README explaining the patterns used.

Beta Status

🚧 GluxUI is currently in public beta

The core API is stable and suitable for early adoption, but may evolve based on community feedback. Key points:

  • ✅ Production-capable - Core features are complete and tested
  • ✅ Breaking changes possible - API may change before 1.0 release
  • ✅ Active development - Regular updates and improvements
  • ✅ Feedback welcome - Your input shapes the final API

We encourage:

  • Testing in non-critical projects
  • Reporting bugs and requesting features via Issues
  • Contributing improvements via Pull Requests
  • Sharing feedback on API design and developer experience

Not recommended:

  • Mission-critical production systems (until 1.0)
  • Projects requiring API stability guarantees

Architecture

GluxUI combines proven technologies for a robust foundation:

  • Go 1.25+ - Type-safe backend with excellent performance
  • a-h/templ - Type-safe HTML generation at compile time
  • HTMX 2.0 - Progressive enhancement for dynamic interactions
  • Pure.css + Font Awesome - Embedded styling with zero external dependencies

Key Design Decisions:

  • Server-side rendering for performance, SEO, and security
  • Flutter-inspired patterns for familiar developer experience
  • Type-safe everything with compile-time validation
  • Zero client dependencies via Go embed (single binary deployment)
  • Callback-based actions separating business logic from HTTP

For detailed architecture information, see the Architecture Overview.

Project Structure

gluxui/
├── *.go                    # Core library implementation
├── *.templ                 # Widget templates (a-h/templ)
├── docs/                   # User-facing documentation
├── specs/                  # Design specifications for maintainers
├── examples/               # Working example applications
│   ├── catalog/            # 15-page widget showcase
│   ├── clicker/            # State management demo
│   ├── form/               # Form validation demo
│   ├── navigation/         # Multi-page navigation
│   └── navigationbar/      # Bottom navigation demo
└── internal/ui/assets/     # Embedded CSS, JS, fonts

Contributing

Contributions are welcome! Ways to contribute:

  • Report bugs - Open an issue with reproduction steps
  • Request features - Describe your use case and requirements
  • Submit PRs - Improvements to code, docs, or examples
  • Share feedback - API design, developer experience, documentation

Before contributing code:

  1. Check existing issues and PRs to avoid duplicates
  2. Discuss significant changes via an issue first
  3. Follow Go best practices and project conventions
  4. Add tests for new functionality
  5. Update documentation as needed

See CONTRIBUTING.md for detailed guidelines.

Community

License

MIT License - Copyright 2025 Olivier Séchet

See LICENSE file for details.

⭐ If you find GluxUI useful, please star the project!

Built with ❤️ for the Go web development community.

Documentation

Overview

Package gluxui action system provides the callback-based action handling that separates business logic from HTTP/HTML concerns.

templ: version: v0.3.960

templ: version: v0.3.960

Package gluxui display widgets handle content presentation. Avatar widgets follow the configuration struct pattern for complex display widgets.

templ: version: v0.3.960

templ: version: v0.3.960

Package gluxui interactive widgets handle user input and actions. These widgets use the functional options pattern for progressive enhancement.

templ: version: v0.3.960

Package gluxui layout widgets provide structure and organization for UI components. Card widgets follow the configuration struct pattern for layout widgets with multiple properties.

Package gluxui Checkbox widget handles boolean input with standard and switch variants. This widget uses the functional options pattern for progressive enhancement.

templ: version: v0.3.960

Package gluxui constants define enums, variants, and type-safe constants used throughout the widget system.

Package gluxui display widgets handle content presentation. These widgets use the direct parameters pattern for simple, minimal configuration.

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

Package gluxui display widgets handle content presentation. Image widgets follow the direct parameters pattern for display widgets.

templ: version: v0.3.960

Package gluxui layout widgets provide structure and organization for UI components. These widgets follow the configuration struct pattern as they typically have multiple equally important properties and handle multiple children.

templ: version: v0.3.960

Package gluxui modal system provides overlay dialogs with comprehensive behavior

templ: version: v0.3.960

Package gluxui high-level components provide complete UI patterns. NavigationBar provides horizontal bottom/top navigation for mobile/app-style interfaces.

templ: version: v0.3.960

Package gluxui high-level components provide complete UI patterns. NavigationRail provides vertical sidebar navigation for desktop applications.

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

Package gluxui Select widget handles dropdown selection with single and multiple options. This widget uses the functional options pattern for progressive enhancement.

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

Package gluxui TextField widget handles text input with various input types and validation. This widget uses the functional options pattern for progressive enhancement.

templ: version: v0.3.960

Package gluxui theme system provides centralized theme management for consistent styling. It supports runtime theme switching, dark/light modes, and theme-aware color functions.

templ: version: v0.3.960

templ: version: v0.3.960

templ: version: v0.3.960

Package gluxui provides a Flutter-like UI library for Go web applications that combines declarative widget composition patterns with server-side rendering via HTMX.

Overview

GluxUI bridges the gap between Flutter's excellent developer experience and Go's web development ecosystem by providing:

  • Flutter-inspired widget system with familiar composition patterns
  • Callback-based actions that separate business logic from HTTP/HTML concerns
  • High-level semantic components (NavigationBar, TabBar, Modal, DataTable)
  • Type-safe API with compile-time validation
  • Zero client-side dependencies - pure server-side rendering with HTMX enhancement

Core Concepts

## Widget Interface

Everything in GluxUI is a Widget that implements the core Widget interface: 

type Widget interface {
    Render(ctx context.Context) templ.Component
}

## Styling System

GluxUI provides a comprehensive styling system with Flutter-inspired patterns: 

style := &Style{
    Width:      "300px",
    Height:     "200px",
    Padding:    AllEdges(16),           // Equal padding on all sides
    Margin:     SymmetricEdges(8, 12),  // Different vertical/horizontal margins
    Background: ColorPrimary,           // Predefined color constants
    Border:     NewBorder("2px", BorderStyleSolid, ColorDark),
    Display:    DisplayFlex,            // CSS display types
}

## EdgeInsets for Spacing

Spacing follows Flutter's EdgeInsets pattern for intuitive control: 

AllEdges(16)              // 16px on all sides
HorizontalEdges(20)       // 20px left and right only
VerticalEdges(12)         // 12px top and bottom only
SymmetricEdges(8, 24)     // 8px vertical, 24px horizontal
OnlyEdges(5, 10, 15, 20)  // Individual control: top, right, bottom, left

## Color System & Theming

GluxUI features a comprehensive theme-aware color system that automatically adapts to the current theme (light/dark mode): 

// Theme-aware semantic colors (functions, not constants)
ColorPrimary(), ColorSecondary(), ColorSuccess(), ColorInfo(),
ColorWarning(), ColorDanger(), ColorLight(), ColorDark()

// Theme-aware grayscale palette
ColorGray100(), ColorGray200(), ..., ColorGray900()

// Custom colors
customColor := NewColor("#7c3aed")
gradientColor := NewColor("linear-gradient(45deg, #667eea, #764ba2)")

## Theme Management

Switch between predefined themes or create custom themes: 

// Switch to predefined themes
SwitchToLightTheme()
SwitchToDarkTheme()

// Create custom themes
customTheme := NewThemeBuilder("MyTheme").
    WithPrimaryColor(NewColor("#e11d48")).
    WithBackgroundColor(NewColor("#fef2f2")).
    Build()
SetTheme(customTheme)

## Border System

Flexible border creation with support for all CSS border properties: 

// Simple border
border := NewBorder("2px", BorderStyleSolid, ColorPrimary)

// Border with rounded corners
roundedBorder := NewBorderRadius("1px", BorderStyleDashed, ColorSuccess, "8px")

Usage Examples

## Basic Widget Creation 

// Create a styled component
widget := &MyWidget{
    BaseWidget: BaseWidget{
        ID:        "my-widget",
        ClassName: "custom-widget",
        Style: &Style{
            Width:      "400px",
            Background: ColorWhite,
            Padding:    AllEdges(20),
            Border:     NewBorderRadius("1px", BorderStyleSolid, ColorGray300, "8px"),
        },
    },
}

## Method Chaining

BaseWidget supports method chaining for fluent configuration: 

widget := &BaseWidget{}
widget.
    WithID("example").
    WithClassName("btn btn-primary").
    WithAttr("data-toggle", "modal").
    WithStyle(&Style{Display: DisplayFlex})

Architecture

GluxUI uses a layered architecture:

  • Core Widget System (this package): Interface definitions and base types
  • Layout Widgets: Container, Column, Row, Grid for structure
  • Display Widgets: Text, Heading, Icon, Image for content presentation
  • Interactive Widgets: Button, TextField, Select for user input
  • High-Level Components: NavigationBar, Modal, DataTable for complete patterns

Integration with templ

GluxUI integrates seamlessly with a-h/templ for type-safe HTML generation: 

func (w *MyWidget) Render(ctx context.Context) templ.Component {
    return templ.ComponentFunc(func(ctx context.Context, writer io.Writer) error {
        // Generate HTML using widget properties
        return nil
    })
}

Development Patterns

## Private Implementation, Public Constructor

Following Go best practices, widget implementations are private with public constructors: 

// Private implementation
type buttonWidget struct {
    BaseWidget
    text string
}

// Public constructor
func Button(text string, options ...ButtonOption) Widget {
    return &buttonWidget{text: text}
}

This ensures clean APIs while hiding implementation details.

For more examples and detailed usage patterns, see the examples_test.go file.

Example (AdvancedStyling)

Example_advancedStyling demonstrates complex styling patterns and combinations. 

// Create a complex styled layout
layout := Container(ContainerConfig{
	Width:      "400px",
	Background: ColorSurface(),
	Border:     NewBorderRadius("1px", BorderStyleSolid, ColorGray300(), "16px"),
	Padding:    AllEdges(20),
	Children: []Widget{
		Column(ColumnConfig{
			Gap: 16,
			Children: []Widget{
				// Header with custom styling
				Container(ContainerConfig{
					Background: ColorPrimary(),
					Padding:    SymmetricEdges(8, 16),
					Border:     NewBorderRadius("1px", BorderStyleSolid, ColorPrimaryDark(), "8px"),
					Children: []Widget{
						TextWithStyle("Advanced Styling", &Style{
							Background: ColorTransparent(),
							Padding:    OnlyEdges(4, 0, 4, 0),
						}),
					},
				}),
				// Content with mixed spacing
				Container(ContainerConfig{
					Padding: OnlyEdges(12, 16, 8, 16), // Asymmetric padding
					Margin:  HorizontalEdges(8),
					Border:  NewBorder("1px", BorderStyleDotted, ColorGray400()),
					Children: []Widget{
						Text("Content with mixed spacing and borders"),
					},
				}),
			},
		}),
	},
})

fmt.Print(renderWidgetToString(layout))

Output:
<div class="glux-container" style="width: 400px; padding: 20px 20px 20px 20px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 16px"><div class="glux-column" style="display: flex; flex-direction: column; gap: 16px"><div class="glux-container" style="padding: 8px 16px 8px 16px; background: #2563eb; border: 1px solid #1d4ed8; border-radius: 8px"><span class="glux-text" style="background: transparent; padding: 4px 0px 4px 0px;">Advanced Styling</span></div><div class="glux-container" style="padding: 12px 16px 8px 16px; margin: 0px 8px 0px 8px; border: 1px dotted #94a3b8"><span class="glux-text">Content with mixed spacing and borders</span></div></div></div>
Example (ButtonCallback)

Example_buttonCallback demonstrates button with action callback. 

// Enable testing mode for predictable action IDs
SetTestingMode(true)
defer SetTestingMode(false) // Reset after example

// This shows the structure - in real usage the callback would be called by HTMX
button := Button("Save Data",
	WithButtonVariant(ButtonVariantPrimary),
	WithButtonOnClick(func(ctx ActionContext) (*ActionResult, error) {
		// This would contain business logic
		return nil, nil
	}),
)

fmt.Print(renderWidgetToString(button))

Output:
<button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #2563eb; color: #ffffff;" hx-post="/_gluxui/actions/action_0" hx-swap="none">Save Data</button>
Example (Composition)

Example_composition demonstrates widget composition patterns. 

// Create a card component using composition
card := Container(ContainerConfig{
	Padding:    AllEdges(16),
	Background: ColorWhite(),
	Border:     NewBorderRadius("1px", BorderStyleSolid, ColorGray300(), "8px"),
	Children: []Widget{
		Column(ColumnConfig{
			Gap: 12,
			Children: []Widget{
				Heading("Card Title", HeadingLevel4),
				Text("Card description text goes here."),
				Row(RowConfig{
					Gap: 8,
					Children: []Widget{
						Button("Action", WithButtonVariant(ButtonVariantPrimary)),
						Button("Cancel", WithButtonVariant(ButtonVariantSecondary)),
					},
				}),
			},
		}),
	},
})

fmt.Print(renderWidgetToString(card))

Output:
<div class="glux-container" style="padding: 16px 16px 16px 16px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px"><div class="glux-column" style="display: flex; flex-direction: column; gap: 12px"><h4 class="glux-heading glux-heading-4" style="margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.4;">Card Title</h4><span class="glux-text">Card description text goes here.</span><div class="glux-row" style="display: flex; flex-direction: row; gap: 8px"><button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #2563eb; color: #ffffff;">Action</button><button type="button" class="glux-btn glux-btn-secondary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #7c3aed; color: #ffffff;">Cancel</button></div></div></div>
Example (Dashboard)

Example_dashboard demonstrates a complete dashboard layout composition. 

dashboard := Container(ContainerConfig{
	Padding: AllEdges(20),
	Children: []Widget{
		// Header
		Row(RowConfig{
			MainAxis: AlignmentSpaceBetween,
			Children: []Widget{
				Heading("Dashboard", HeadingLevel1),
				Button("Settings", WithButtonVariant(ButtonVariantSecondary)),
			},
		}),
		// Stats
		Row(RowConfig{
			Gap: 16,
			Children: []Widget{
				Container(ContainerConfig{
					Padding: AllEdges(12),
					Children: []Widget{
						Column(ColumnConfig{
							Children: []Widget{
								Heading("42", HeadingLevel3),
								Text("Users"),
							},
						}),
					},
				}),
			},
		}),
	},
})

fmt.Print(renderWidgetToString(dashboard))

Output:
<div class="glux-container" style="padding: 20px 20px 20px 20px"><div class="glux-row" style="display: flex; flex-direction: row; justify-content: space-between"><h1 class="glux-heading glux-heading-1" style="margin: 0; font-size: 2.5rem; font-weight: 600; line-height: 1.2;">Dashboard</h1><button type="button" class="glux-btn glux-btn-secondary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #7c3aed; color: #ffffff;">Settings</button></div><div class="glux-row" style="display: flex; flex-direction: row; gap: 16px"><div class="glux-container" style="padding: 12px 12px 12px 12px"><div class="glux-column" style="display: flex; flex-direction: column"><h3 class="glux-heading glux-heading-3" style="margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.3;">42</h3><span class="glux-text">Users</span></div></div></div></div>
Example (Form)

Example_form demonstrates form-like layout patterns. 

form := Container(ContainerConfig{
	Padding: AllEdges(16),
	Children: []Widget{
		Column(ColumnConfig{
			Gap: 12,
			Children: []Widget{
				Heading("Login", HeadingLevel2),
				Text("Username: [field]"),
				Text("Password: [field]"),
				Row(RowConfig{
					Gap: 8,
					Children: []Widget{
						Button("Cancel", WithButtonVariant(ButtonVariantSecondary)),
						Button("Login", WithButtonVariant(ButtonVariantPrimary)),
					},
				}),
			},
		}),
	},
})

fmt.Print(renderWidgetToString(form))

Output:
<div class="glux-container" style="padding: 16px 16px 16px 16px"><div class="glux-column" style="display: flex; flex-direction: column; gap: 12px"><h2 class="glux-heading glux-heading-2" style="margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.3;">Login</h2><span class="glux-text">Username: [field]</span><span class="glux-text">Password: [field]</span><div class="glux-row" style="display: flex; flex-direction: row; gap: 8px"><button type="button" class="glux-btn glux-btn-secondary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #7c3aed; color: #ffffff;">Cancel</button><button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #2563eb; color: #ffffff;">Login</button></div></div></div>
Example (IconCard)

Example_iconCard demonstrates icons in a card layout with actions. 

// Enable testing mode for predictable action IDs
SetTestingMode(true)
defer SetTestingMode(false)

card := Container(ContainerConfig{
	Padding:    AllEdges(16),
	Background: ColorWhite(),
	Border:     NewBorderRadius("1px", BorderStyleSolid, ColorGray300(), "8px"),
	Children: []Widget{
		Column(ColumnConfig{
			Gap: 12,
			Children: []Widget{
				Row(RowConfig{
					Gap:       12,
					MainAxis:  AlignmentStart,
					CrossAxis: CrossAlignmentCenter,
					Children: []Widget{
						Icon(IconFile, WithIconSize(IconSizeLarge), WithIconColor(ColorInfo())),
						Column(ColumnConfig{
							Children: []Widget{
								Heading("Document.pdf", HeadingLevel4),
								Text("Updated 2 hours ago"),
							},
						}),
					},
				}),
				Row(RowConfig{
					Gap:      8,
					MainAxis: AlignmentEnd,
					Children: []Widget{
						Button("", WithButtonVariant(ButtonVariantSecondary), WithButtonOnClick(func(ctx ActionContext) (*ActionResult, error) { return nil, nil })),
						Button("", WithButtonVariant(ButtonVariantPrimary), WithButtonOnClick(func(ctx ActionContext) (*ActionResult, error) { return nil, nil })),
						Button("", WithButtonVariant(ButtonVariantDanger), WithButtonOnClick(func(ctx ActionContext) (*ActionResult, error) { return nil, nil })),
					},
				}),
			},
		}),
	},
})
fmt.Print(renderWidgetToString(card))

Output:
<div class="glux-container" style="padding: 16px 16px 16px 16px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px"><div class="glux-column" style="display: flex; flex-direction: column; gap: 12px"><div class="glux-row" style="display: flex; flex-direction: row; gap: 12px; justify-content: flex-start; align-items: center"><i class="fas fa-file glux-icon glux-icon-large" style="font-size: 1.5rem; color: #0ea5e9;"></i><div class="glux-column" style="display: flex; flex-direction: column"><h4 class="glux-heading glux-heading-4" style="margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.4;">Document.pdf</h4><span class="glux-text">Updated 2 hours ago</span></div></div><div class="glux-row" style="display: flex; flex-direction: row; gap: 8px; justify-content: flex-end"><button type="button" class="glux-btn glux-btn-secondary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #7c3aed; color: #ffffff;" hx-post="/_gluxui/actions/action_0" hx-swap="none"></button><button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #2563eb; color: #ffffff;" hx-post="/_gluxui/actions/action_1" hx-swap="none"></button><button type="button" class="glux-btn glux-btn-danger" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #dc2626; color: white;" hx-post="/_gluxui/actions/action_2" hx-swap="none"></button></div></div></div>
Example (IconColors)

Example_iconColors demonstrates theme-aware icon colors. 

colors := Row(RowConfig{
	Gap:      8,
	MainAxis: AlignmentCenter,
	Children: []Widget{
		Icon("fas fa-circle", WithIconColor(ColorPrimary())),
		Icon("fas fa-circle", WithIconColor(ColorSecondary())),
		Icon("fas fa-circle", WithIconColor(ColorSuccess())),
		Icon("fas fa-circle", WithIconColor(ColorWarning())),
		Icon("fas fa-circle", WithIconColor(ColorDanger())),
		Icon("fas fa-circle", WithIconColor(ColorInfo())),
	},
})
fmt.Print(renderWidgetToString(colors))

Output:
<div class="glux-row" style="display: flex; flex-direction: row; gap: 8px; justify-content: center"><i class="fas fa-circle glux-icon glux-icon-medium" style="font-size: 1rem; color: #2563eb;"></i><i class="fas fa-circle glux-icon glux-icon-medium" style="font-size: 1rem; color: #7c3aed;"></i><i class="fas fa-circle glux-icon glux-icon-medium" style="font-size: 1rem; color: #16a34a;"></i><i class="fas fa-circle glux-icon glux-icon-medium" style="font-size: 1rem; color: #ea580c;"></i><i class="fas fa-circle glux-icon glux-icon-medium" style="font-size: 1rem; color: #dc2626;"></i><i class="fas fa-circle glux-icon glux-icon-medium" style="font-size: 1rem; color: #0ea5e9;"></i></div>
Example (IconDarkTheme)

Example_iconDarkTheme demonstrates how icons adapt to dark theme. 

// Switch to dark theme
SwitchToDarkTheme()

// Create icons that use theme-aware colors
darkThemeIcons := Row(RowConfig{
	Gap: 12,
	Children: []Widget{
		Icon("fas fa-sun", WithIconColor(ColorWarning())),
		Icon("fas fa-moon", WithIconColor(ColorOnSurface())),
		Icon(IconStar, WithIconColor(ColorPrimary())),
	},
})
fmt.Print(renderWidgetToString(darkThemeIcons))

// Reset to light theme
SwitchToLightTheme()

Output:
<div class="glux-row" style="display: flex; flex-direction: row; gap: 12px"><i class="fas fa-sun glux-icon glux-icon-medium" style="font-size: 1rem; color: #f97316;"></i><i class="fas fa-moon glux-icon glux-icon-medium" style="font-size: 1rem; color: #e2e8f0;"></i><i class="fas fa-star glux-icon glux-icon-medium" style="font-size: 1rem; color: #3b82f6;"></i></div>
Example (IconNavigation)

Example_iconNavigation demonstrates navigation icons in a practical layout. 

nav := Row(RowConfig{
	Gap:      24,
	MainAxis: AlignmentSpaceAround,
	Children: []Widget{
		Column(ColumnConfig{
			Gap:       8,
			CrossAxis: CrossAlignmentCenter,
			Children: []Widget{
				Icon(IconHome, WithIconSize(IconSizeLarge), WithIconColor(ColorPrimary())),
				Text("Home"),
			},
		}),
		Column(ColumnConfig{
			Gap:       8,
			CrossAxis: CrossAlignmentCenter,
			Children: []Widget{
				Icon(IconSearch, WithIconSize(IconSizeLarge), WithIconColor(ColorGray600())),
				Text("Search"),
			},
		}),
		Column(ColumnConfig{
			Gap:       8,
			CrossAxis: CrossAlignmentCenter,
			Children: []Widget{
				Icon(IconUser, WithIconSize(IconSizeLarge), WithIconColor(ColorGray600())),
				Text("Profile"),
			},
		}),
	},
})
fmt.Print(renderWidgetToString(nav))

Output:
<div class="glux-row" style="display: flex; flex-direction: row; gap: 24px; justify-content: space-around"><div class="glux-column" style="display: flex; flex-direction: column; gap: 8px; align-items: center"><i class="fas fa-home glux-icon glux-icon-large" style="font-size: 1.5rem; color: #2563eb;"></i><span class="glux-text">Home</span></div><div class="glux-column" style="display: flex; flex-direction: column; gap: 8px; align-items: center"><i class="fas fa-search glux-icon glux-icon-large" style="font-size: 1.5rem; color: #475569;"></i><span class="glux-text">Search</span></div><div class="glux-column" style="display: flex; flex-direction: column; gap: 8px; align-items: center"><i class="fas fa-user glux-icon glux-icon-large" style="font-size: 1.5rem; color: #475569;"></i><span class="glux-text">Profile</span></div></div>
Example (IconSizes)

Example_iconSizes demonstrates all available icon sizes. 

sizes := Row(RowConfig{
	Gap:      12,
	MainAxis: AlignmentCenter,
	Children: []Widget{
		Icon(IconStar, WithIconSize(IconSizeSmall)),
		Icon(IconStar, WithIconSize(IconSizeMedium)),
		Icon(IconStar, WithIconSize(IconSizeLarge)),
		Icon(IconStar, WithIconSize(IconSizeXLarge)),
		Icon(IconStar, WithIconSize(IconSize2X)),
		Icon(IconStar, WithIconSize(IconSize3X)),
	},
})
fmt.Print(renderWidgetToString(sizes))

Output:
<div class="glux-row" style="display: flex; flex-direction: row; gap: 12px; justify-content: center"><i class="fas fa-star glux-icon glux-icon-small" style="font-size: 0.875rem; color: #1e293b;"></i><i class="fas fa-star glux-icon glux-icon-medium" style="font-size: 1rem; color: #1e293b;"></i><i class="fas fa-star glux-icon glux-icon-large" style="font-size: 1.5rem; color: #1e293b;"></i><i class="fas fa-star glux-icon glux-icon-xlarge" style="font-size: 2rem; color: #1e293b;"></i><i class="fas fa-star glux-icon glux-icon-2x" style="font-size: 2.5rem; color: #1e293b;"></i><i class="fas fa-star glux-icon glux-icon-3x" style="font-size: 3rem; color: #1e293b;"></i></div>
Example (IconStyles)

Example_iconStyles demonstrates Font Awesome style variants. 

styles := Row(RowConfig{
	Gap:      16,
	MainAxis: AlignmentCenter,
	Children: []Widget{
		Column(ColumnConfig{
			Gap:       4,
			CrossAxis: CrossAlignmentCenter,
			Children: []Widget{
				Icon(IconHeart), // fas fa-heart (solid)
				Text("Solid"),
			},
		}),
		Column(ColumnConfig{
			Gap:       4,
			CrossAxis: CrossAlignmentCenter,
			Children: []Widget{
				Icon("far fa-heart"), // Regular heart
				Text("Regular"),
			},
		}),
		Column(ColumnConfig{
			Gap:       4,
			CrossAxis: CrossAlignmentCenter,
			Children: []Widget{
				Icon(IconGithub), // fab fa-github (brands)
				Text("Brands"),
			},
		}),
	},
})
fmt.Print(renderWidgetToString(styles))

Output:
<div class="glux-row" style="display: flex; flex-direction: row; gap: 16px; justify-content: center"><div class="glux-column" style="display: flex; flex-direction: column; gap: 4px; align-items: center"><i class="fas fa-heart glux-icon glux-icon-medium" style="font-size: 1rem; color: #1e293b;"></i><span class="glux-text">Solid</span></div><div class="glux-column" style="display: flex; flex-direction: column; gap: 4px; align-items: center"><i class="far fa-heart glux-icon glux-icon-medium" style="font-size: 1rem; color: #1e293b;"></i><span class="glux-text">Regular</span></div><div class="glux-column" style="display: flex; flex-direction: column; gap: 4px; align-items: center"><i class="fab fa-github glux-icon glux-icon-medium" style="font-size: 1rem; color: #1e293b;"></i><span class="glux-text">Brands</span></div></div>
Example (MethodChaining)

Example_methodChaining demonstrates BaseWidget fluent API for configuration. 

// Create a widget and configure it using method chaining
widget := &BaseWidget{}
widget.
	WithID("example-widget").
	WithClassName("btn btn-primary").
	WithAttr("data-toggle", "modal").
	WithAttr("aria-label", "Example button").
	WithStyle(&Style{
		Display: DisplayFlex,
		Padding: AllEdges(8),
	})

// Create a simple container to demonstrate the configured BaseWidget
container := Container(ContainerConfig{
	BaseWidget: *widget,
	Children: []Widget{
		Text("Method chaining example"),
	},
})

fmt.Print(renderWidgetToString(container))

Output:
<div id="example-widget" class="glux-container btn btn-primary" style="display: flex; padding: 8px 8px 8px 8px" aria-label="Example button" data-toggle="modal"><span class="glux-text">Method chaining example</span></div>
Example (Styling)

Example_styling demonstrates comprehensive styling capabilities. 

// Custom styled container
styledContainer := Container(ContainerConfig{
	Width:      "300px",
	Background: ColorPrimary(),
	Padding:    SymmetricEdges(8, 16),
	Border:     NewBorderRadius("2px", BorderStyleSolid, ColorDark(), "8px"),
	Children: []Widget{
		TextWithStyle("Custom styled content", &Style{
			Background: ColorWhite(),
			Padding:    AllEdges(4),
		}),
	},
})

fmt.Print(renderWidgetToString(styledContainer))

Output:
<div class="glux-container" style="width: 300px; padding: 8px 16px 8px 16px; background: #2563eb; border: 2px solid #343a40; border-radius: 8px"><span class="glux-text" style="background: #ffffff; padding: 4px 4px 4px 4px;">Custom styled content</span></div>
Example (ThemeAwareColors)

Example_themeAwareColors demonstrates theme-aware color functions. 

// Create a container that uses theme-aware colors
container := Container(ContainerConfig{
	Background: ColorBackground(),
	Border:     NewBorder("1px", BorderStyleSolid, ColorPrimary()),
	Padding:    AllEdges(12),
	Children: []Widget{
		TextWithStyle("Theme-aware styling", &Style{
			Background: ColorSurface(),
			Padding:    AllEdges(8),
		}),
	},
})

fmt.Print(renderWidgetToString(container))

Output:
<div class="glux-container" style="padding: 12px 12px 12px 12px; background: #ffffff; border: 1px solid #2563eb"><span class="glux-text" style="background: #f8fafc; padding: 8px 8px 8px 8px;">Theme-aware styling</span></div>

Index

Examples

Constants

View Source 
const (
	// Navigation & UI Icons
	IconHome         = "fas fa-home"
	IconMenu         = "fas fa-bars"
	IconClose        = "fas fa-times"
	IconSearch       = "fas fa-search"
	IconSettings     = "fas fa-cog"
	IconUser         = "fas fa-user"
	IconUsers        = "fas fa-users"
	IconBell         = "fas fa-bell"
	IconChevronLeft  = "fas fa-chevron-left"
	IconChevronRight = "fas fa-chevron-right"
	IconChevronUp    = "fas fa-chevron-up"
	IconChevronDown  = "fas fa-chevron-down"
	IconArrowLeft    = "fas fa-arrow-left"
	IconArrowRight   = "fas fa-arrow-right"
	IconArrowUp      = "fas fa-arrow-up"
	IconArrowDown    = "fas fa-arrow-down"

	// Action Icons
	IconEdit     = "fas fa-edit"
	IconDelete   = "fas fa-trash"
	IconSave     = "fas fa-save"
	IconDownload = "fas fa-download"
	IconUpload   = "fas fa-upload"
	IconCopy     = "fas fa-copy"
	IconPaste    = "fas fa-paste"
	IconCut      = "fas fa-cut"
	IconUndo     = "fas fa-undo"
	IconRedo     = "fas fa-redo"
	IconRefresh  = "fas fa-sync"
	IconPrint    = "fas fa-print"
	IconShare    = "fas fa-share"
	IconLink     = "fas fa-link"
	IconUnlink   = "fas fa-unlink"

	// Status & Communication Icons
	IconCheck    = "fas fa-check"
	IconTimes    = "fas fa-times"
	IconPlus     = "fas fa-plus"
	IconMinus    = "fas fa-minus"
	IconInfo     = "fas fa-info-circle"
	IconWarning  = "fas fa-exclamation-triangle"
	IconError    = "fas fa-times-circle"
	IconSuccess  = "fas fa-check-circle"
	IconQuestion = "fas fa-question-circle"
	IconMail     = "fas fa-envelope"
	IconPhone    = "fas fa-phone"
	IconComment  = "fas fa-comment"
	IconComments = "fas fa-comments"

	// Content & Media Icons
	IconFile         = "fas fa-file"
	IconFolder       = "fas fa-folder"
	IconFolderOpen   = "fas fa-folder-open"
	IconImage        = "fas fa-image"
	IconVideo        = "fas fa-video"
	IconAudio        = "fas fa-volume-up"
	IconDocument     = "fas fa-file-alt"
	IconPdf          = "fas fa-file-pdf"
	IconSpreadsheet  = "fas fa-file-excel"
	IconPresentation = "fas fa-file-powerpoint"
	IconArchive      = "fas fa-file-archive"

	// Dashboard & Analytics Icons
	IconDashboard = "fas fa-tachometer-alt"
	IconChart     = "fas fa-chart-bar"
	IconPieChart  = "fas fa-chart-pie"
	IconLineChart = "fas fa-chart-line"
	IconTable     = "fas fa-table"
	IconCalendar  = "fas fa-calendar"
	IconClock     = "fas fa-clock"
	IconTasks     = "fas fa-tasks"
	IconTag       = "fas fa-tag"
	IconTags      = "fas fa-tags"

	// System & Security Icons
	IconLock      = "fas fa-lock"
	IconUnlock    = "fas fa-unlock"
	IconKey       = "fas fa-key"
	IconShield    = "fas fa-shield-alt"
	IconDatabase  = "fas fa-database"
	IconServer    = "fas fa-server"
	IconCloud     = "fas fa-cloud"
	IconGlobe     = "fas fa-globe"
	IconWifi      = "fas fa-wifi"
	IconBluetooth = "fas fa-bluetooth"

	// E-commerce & Finance Icons
	IconShoppingCart = "fas fa-shopping-cart"
	IconCreditCard   = "fas fa-credit-card" // nolint:gosec // This is an icon class, not credentials
	IconMoney        = "fas fa-dollar-sign"
	IconGift         = "fas fa-gift"
	IconHeart        = "fas fa-heart"
	IconStar         = "fas fa-star"
	IconBookmark     = "fas fa-bookmark"

	// Brand Icons (using fab style)
	IconGithub    = "fab fa-github"
	IconGoogle    = "fab fa-google"
	IconFacebook  = "fab fa-facebook"
	IconTwitter   = "fab fa-twitter"
	IconLinkedin  = "fab fa-linkedin"
	IconInstagram = "fab fa-instagram"
	IconYoutube   = "fab fa-youtube"
)

Common Font Awesome icon constants for type safety. These constants provide compile-time validation for frequently used icons.

View Source 
const (
	// Additional UI Icons
	IconCircle = "fas fa-circle"
	IconSun    = "fas fa-sun"
	IconMoon   = "fas fa-moon"
)

Additional useful icons for examples and common usage

Variables

This section is empty.

Functions

func BuildCallbackAttrs 

func BuildCallbackAttrs(callback ActionCallback) map[string]any

BuildCallbackAttrs generates the HTML attributes needed for HTMX integration. This is used internally by widgets to add the appropriate hx-* attributes.

func ClearCallbacks 

func ClearCallbacks()

ClearCallbacks removes all registered callbacks. This is primarily useful for testing.

func DrawerCloseSwapMode added in v0.2.0 

func DrawerCloseSwapMode() string

DrawerCloseSwapMode returns the HTMX swap mode to use in the OnClose ActionResult. It includes a swap delay matching the current theme's animation duration so that HTMX waits for the slide-out animation to finish before replacing the DOM.

func FontFamilyMono added in v0.2.0 

func FontFamilyMono() string

FontFamilyMono returns the current theme's monospace font family. Falls back to "monospace" when not set.

func GetAssetFS 

func GetAssetFS() fs.FS

GetAssetFS returns the embedded filesystem

func GetThemeName 

func GetThemeName() string

GetThemeName returns the name of the current theme.

func IsDarkTheme 

func IsDarkTheme() bool

IsDarkTheme returns true if the current theme is a dark theme.

func IsLightTheme 

func IsLightTheme() bool

IsLightTheme returns true if the current theme is a light theme. This is determined by checking if the background is lighter than the text color.

func LoggingMiddleware 

func LoggingMiddleware(next http.Handler) http.Handler

LoggingMiddleware logs HTTP requests

func ParseFormData 

func ParseFormData(r *http.Request) (map[string]string, error)

ParseFormData is a utility function to parse form data from a request. This is used internally by the action handler.

func PrintCurrentTheme 

func PrintCurrentTheme()

PrintCurrentTheme prints the current theme information to stdout. This is useful for debugging and development.

func RecoveryMiddleware 

func RecoveryMiddleware(next http.Handler) http.Handler

RecoveryMiddleware recovers from panics

func RegisterCallback 

func RegisterCallback(callback ActionCallback) string

RegisterCallback registers an action callback and returns a unique endpoint URL. This is called automatically when widgets with callbacks are rendered.

func RegisterThemeFamily added in v0.2.0 

func RegisterThemeFamily(f *ThemeFamily)

RegisterThemeFamily registers a theme family so that SwitchToLightTheme / SwitchToDarkTheme can stay within the active family.

func ServeAsset 

func ServeAsset(filename string) ([]byte, string, error)

ServeAsset returns asset data, content type, or error

func SetTestingMode 

func SetTestingMode(enabled bool)

SetTestingMode enables or disables deterministic ID generation for testing. When enabled, action IDs will be predictable (action_0, action_1, etc.) This should only be used in tests and examples.

func SetTheme 

func SetTheme(theme *Theme)

SetTheme sets the current global theme. This will affect all subsequently rendered widgets.

Example

ExampleSetTheme demonstrates basic theme switching functionality. 

// Start with default light theme
text := TextWithStyle("Light Theme", &Style{
	Background: ColorPrimary(),
	Padding:    AllEdges(8),
})
fmt.Print(renderWidgetToString(text))

// Switch to dark theme
SetTheme(DefaultDarkTheme())
text = TextWithStyle("Dark Theme", &Style{
	Background: ColorPrimary(),
	Padding:    AllEdges(8),
})
fmt.Print(" | ")
fmt.Print(renderWidgetToString(text))

// Reset to light theme for other examples
SetTheme(DefaultLightTheme())

Output:
<span class="glux-text" style="background: #2563eb; padding: 8px 8px 8px 8px;">Light Theme</span> | <span class="glux-text" style="background: #3b82f6; padding: 8px 8px 8px 8px;">Dark Theme</span>

func SetupActionRoutes 

func SetupActionRoutes(mux *http.ServeMux)

SetupActionRoutes is a helper function to register action handlers with an HTTP mux. This is a convenience function for common setup patterns.

func StaticBody 

func StaticBody(widget Widget) func(ctx context.Context) Widget

StaticBody creates a Body function from a static widget. This is a convenience helper for applications that don't need dynamic content.

Example: 

app := gluxui.NewApp(gluxui.AppConfig{
    Body: gluxui.StaticBody(homePage()),
})

func SwitchToDarkTheme 

func SwitchToDarkTheme()

SwitchToDarkTheme switches to the dark variant of the current theme family. If the current family is not registered it falls back to DefaultDarkTheme.

Example

ExampleSwitchToDarkTheme demonstrates switching to the default dark theme. 

// Switch to dark theme
SwitchToDarkTheme()

// Create a widget that uses theme colors
button := Button("Dark Button", WithButtonVariant(ButtonVariantPrimary))
fmt.Print(renderWidgetToString(button))

// Reset to light theme for other examples
SwitchToLightTheme()

Output:
<button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #3b82f6; color: #ffffff;">Dark Button</button>

func SwitchToLightTheme 

func SwitchToLightTheme()

SwitchToLightTheme switches to the light variant of the current theme family. If the current family is not registered it falls back to DefaultLightTheme.

Example

ExampleSwitchToLightTheme demonstrates switching to the default light theme. 

// Ensure we start with dark theme
SwitchToDarkTheme()

// Switch back to light theme
SwitchToLightTheme()

// Create a widget that uses theme colors
button := Button("Light Button", WithButtonVariant(ButtonVariantPrimary))
fmt.Print(renderWidgetToString(button))

Output:
<button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #2563eb; color: #ffffff;">Light Button</button>

func UnregisterCallback 

func UnregisterCallback(actionID string)

UnregisterCallback removes a callback from the registry. This is useful for cleanup in long-running applications.

func ValidateTheme 

func ValidateTheme(theme *Theme) error

ValidateTheme performs basic validation on a theme to ensure it has required colors.

Types

type ActionCallback 

type ActionCallback func(ctx ActionContext) (*ActionResult, error)

ActionCallback represents a pure business logic function that handles user interactions. These callbacks are automatically registered with HTTP endpoints and called when triggered.

The callback receives an ActionContext with request data and should return an ActionResult for partial updates or nil for no update, along with an error if the action fails.

Returning nil ActionResult with nil error means success with no DOM update (backward compatible). Returning an ActionResult triggers a targeted HTMX swap of the specified widget.

func GetCallback 

func GetCallback(actionID string) ActionCallback

GetCallback retrieves a callback by its action ID. Returns nil if the callback doesn't exist.

type ActionContext 

type ActionContext struct {
	// Request is the original HTTP request that triggered this action
	Request *http.Request

	// Writer is the HTTP response writer for sending responses
	Writer http.ResponseWriter

	// FormData contains parsed form data from the request
	FormData map[string]string

	// Headers contains request headers for easy access
	Headers map[string]string

	// UserContext is the request context, useful for user/session data
	UserContext context.Context
}

ActionContext provides request data and utilities to action callbacks. It abstracts HTTP details so callbacks can focus on pure business logic.

func (ActionContext) BindForm 

func (ctx ActionContext) BindForm(dest interface{}) error

BindForm attempts to bind form data to a struct. This is a placeholder implementation - in a real system this would use a proper form binding library like gorilla/schema.

func (ActionContext) GetFormValue 

func (ctx ActionContext) GetFormValue(name string) string

GetFormValue retrieves a form value by name. Returns empty string if the value doesn't exist.

func (ActionContext) GetFormValues 

func (ctx ActionContext) GetFormValues(name string) []string

GetFormValues retrieves all form values for a given name. This is useful for handling multiple values from checkboxes or multi-select elements. Returns an empty slice if the field doesn't exist.

func (ActionContext) GetHeader 

func (ctx ActionContext) GetHeader(name string) string

GetHeader retrieves a header value by name. Returns empty string if the header doesn't exist.

func (ActionContext) GetUser 

func (ctx ActionContext) GetUser() interface{}

GetUser retrieves user data from the context. This is a convenience method for accessing user information stored in the request context.

func (ActionContext) SetHeader 

func (ctx ActionContext) SetHeader(name, value string)

SetHeader sets a response header. This is a convenience method for ctx.Writer.Header().Set(name, value).

type ActionHandler 

type ActionHandler struct{}

ActionHandler is an HTTP handler that processes action callbacks. It should be registered to handle the /_gluxui/actions/ path.

func NewActionHandler 

func NewActionHandler() *ActionHandler

NewActionHandler creates a new action handler.

func (*ActionHandler) ServeHTTP 

func (h *ActionHandler) ServeHTTP(w http.ResponseWriter, r *http.Request)

ServeHTTP implements the http.Handler interface for action processing.

type ActionRegistry 

type ActionRegistry struct {
	// contains filtered or unexported fields
}

ActionRegistry manages the global registry of action callbacks. It maps unique action IDs to their corresponding callback functions.

type ActionResult 

type ActionResult struct {
	// TargetID is the HTML element ID to target for the swap (required if Widget is set)
	// HTMX will swap content into the element with id="TargetID"
	TargetID string

	// Widget is the new widget to render as replacement (required if TargetID is set)
	Widget Widget

	// SwapMode specifies the HTMX swap strategy (optional, default: "outerHTML")
	// Options: "innerHTML", "outerHTML", "beforebegin", "afterbegin", "beforeend", "afterend", "delete", "none"
	SwapMode string

	// OOBUpdates holds additional out-of-band updates rendered after the primary widget.
	// Each update replaces the innerHTML of the element with the matching TargetID.
	OOBUpdates []OOBUpdate
}

ActionResult represents the result of an action callback. It specifies which DOM element to update and what widget to render.

type AlertConfig added in v0.2.0 

type AlertConfig struct {
	// Level is the severity: warn or error.
	Level AlertLevel
	// Title is the alert heading.
	Title string
	// Time is an optional monospace timestamp shown on the right.
	Time string
	// Content is the alert body widget.
	Content Widget
	BaseWidget
}

AlertConfig configures the Alert widget.

type AlertLevel added in v0.2.0 

type AlertLevel string

AlertLevel controls the severity color of an Alert. 

const (
	// AlertLevelWarn is the warning severity level.
	AlertLevelWarn AlertLevel = "warn"
	// AlertLevelError is the error severity level.
	AlertLevelError AlertLevel = "error"
)

type AlertTheme added in v0.2.0 

type AlertTheme struct {
	// Padding is the inner padding of the alert box (e.g. "12px 16px").
	Padding string
	// BorderLeftWidth is the thickness of the left accent border (e.g. "3px").
	BorderLeftWidth string
	// BorderRadius is applied to the right side of the alert (e.g. "0 4px 4px 0").
	BorderRadius string
	// FontSize is the base font size for alert body text (e.g. "13px").
	FontSize string
	// TitleFontWeight is the font weight for the alert title (e.g. "600").
	TitleFontWeight string
	// HeaderMarginBottom is the gap between the title row and body content (e.g. "6px").
	HeaderMarginBottom string
	// TimeFontSize is the font size for the optional timestamp (e.g. "11px").
	TimeFontSize string
	// WarnBackground overrides the background for warn-level alerts.
	// Empty string falls back to ColorSurface().
	WarnBackground string
	// ErrorBackground overrides the background for error-level alerts.
	// Empty string falls back to ColorSurface().
	ErrorBackground string
}

AlertTheme defines alert-specific theme properties.

type AlignItems 

type AlignItems string

AlignItems represents CSS align-items values (cross axis alignment for flex). 

const (
	// AlignItemsFlexStart aligns items to start of cross axis
	AlignItemsFlexStart AlignItems = "flex-start"
	// AlignItemsFlexEnd aligns items to end of cross axis
	AlignItemsFlexEnd AlignItems = "flex-end"
	// AlignItemsCenter centers items on cross axis
	AlignItemsCenter AlignItems = "center"
	// AlignItemsStretch stretches items across cross axis
	AlignItemsStretch AlignItems = "stretch"
	// AlignItemsBaseline aligns items to their baseline
	AlignItemsBaseline AlignItems = "baseline"
)

type Alignment 

type Alignment string

Alignment represents alignment values for layout widgets. These constants provide type-safe alignment options similar to Flutter's alignment system. 

const (
	// AlignmentStart aligns to the start of the container
	AlignmentStart Alignment = "start"
	// AlignmentEnd aligns to the end of the container
	AlignmentEnd Alignment = "end"
	// AlignmentCenter centers alignment
	AlignmentCenter Alignment = "center"
	// AlignmentSpaceBetween distributes space between items
	AlignmentSpaceBetween Alignment = "space-between"
	// AlignmentSpaceAround distributes space around items
	AlignmentSpaceAround Alignment = "space-around"
	// AlignmentSpaceEvenly distributes space evenly
	AlignmentSpaceEvenly Alignment = "space-evenly"
	// AlignmentStretch stretches to fill available space
	AlignmentStretch Alignment = "stretch"
)

type App 

type App struct {
	// contains filtered or unexported fields
}

App represents a complete GluxUI application

func NewApp 

func NewApp(config AppConfig) *App

NewApp creates a new GluxUI application with the provided configuration. It follows the high-level widget pattern with config struct.

func (*App) RenderPage 

func (a *App) RenderPage(ctx context.Context, body Widget) string

RenderPage renders a widget as a complete HTML page

func (*App) ServeHTTP 

func (a *App) ServeHTTP(w http.ResponseWriter, r *http.Request)

ServeHTTP makes App implement http.Handler

func (*App) Shutdown 

func (a *App) Shutdown(ctx context.Context) error

Shutdown gracefully shuts down the server

func (*App) Start 

func (a *App) Start() error

Start starts the application If an adapter was provided in config, delegates to the adapter Otherwise uses the built-in HTTP server

func (*App) StartTLS 

func (a *App) StartTLS(certFile, keyFile string) error

StartTLS starts the application with HTTPS (built-in server only)

type AppConfig 

type AppConfig struct {
	// Root widget configuration (required)
	Body func(ctx context.Context) Widget // Function that returns the root widget tree

	// Optional fields
	Title       string        // HTML page title (default: "GluxUI App")
	Description string        // Meta description
	Favicon     string        // Favicon URL
	Adapter     ServerAdapter // Optional: use framework adapter instead of built-in server

	// Server configuration (used by built-in server or adapters)
	Host string // Host address (default: "127.0.0.1")
	Port int    // Port number (default: 8080)

	// Routing
	Middleware []Middleware // HTTP middleware chain

	// Asset handling
	AssetPath string // Custom asset path (default: "/_gluxui/assets")

	// HTML configuration
	HeadInject     []string        // Additional <head> content (static, evaluated at app start)
	HeadInjectFunc []func() string // Additional <head> content (dynamic, evaluated per request)
	BodyInject     []string        // Additional <body> content (before closing tag)
	HTMLWrapper    HTMLWrapperFunc // Custom HTML wrapper

	// Lifecycle hooks
	OnReady    func(addr string) // Called when server is ready
	OnShutdown func()            // Called on graceful shutdown

	// Server customization
	ServerConfig *http.Server // Custom server configuration
}

AppConfig provides configuration for the App widget

type AppShellConfig added in v0.2.0 

type AppShellConfig struct {
	// Topbar is the horizontal header bar spanning the full width.
	Topbar Widget
	// Sidebar is the left navigation panel.
	Sidebar Widget
	// Content is the main scrollable area.
	Content Widget
	// DrawerSlot is an optional side panel rendered to the right of Content.
	// Wrap it in a container with a stable id (e.g. "drawer-slot") so it can
	// be replaced via HTMX OOB updates without touching the rest of the shell.
	DrawerSlot Widget
	BaseWidget
}

AppShellConfig configures the AppShell layout widget.

type AssetHandler 

type AssetHandler struct {
	// contains filtered or unexported fields
}

AssetHandler serves embedded assets with caching

func NewAssetHandler 

func NewAssetHandler() *AssetHandler

NewAssetHandler creates asset handler with pre-populated cache

func (*AssetHandler) ServeHTTP 

func (h *AssetHandler) ServeHTTP(w http.ResponseWriter, r *http.Request)

ServeHTTP implements http.Handler

type AvatarConfig 

type AvatarConfig struct {
	// Content - exactly one should be set (Image, Initials, or Icon)
	Image    string // Image URL for photo avatar
	Initials string // Text initials (e.g., "JD" for John Doe)
	Icon     string // Icon class for icon-based avatar

	// Appearance
	Size        AvatarSize  // Size variant (XS, S, M, L, XL)
	Shape       AvatarShape // Circle (default) or Square
	BorderColor Color       // Optional border color
	Background  Color       // Background color (for initials/icon)

	// Status indicator
	Status *AvatarStatus // Optional status badge

	// Interactive
	OnClick ActionCallback // Optional click handler

	// Base properties
	BaseWidget
}

AvatarConfig configures an Avatar widget. Avatar displays user profile images with fallback to initials or icons. It supports status indicators, multiple shapes, and various sizes.

type AvatarShape 

type AvatarShape string

AvatarShape represents avatar shape variants. Avatars can be circular or square with rounded corners. 

const (
	// AvatarShapeCircle represents circular avatar (default)
	AvatarShapeCircle AvatarShape = "circle"
	// AvatarShapeSquare represents square avatar with rounded corners
	AvatarShapeSquare AvatarShape = "square"
)

type AvatarSize 

type AvatarSize string

AvatarSize represents avatar size variants. Sizes range from extra small (24px) to extra large (80px). 

const (
	// AvatarSizeXS represents extra small avatar (24px)
	AvatarSizeXS AvatarSize = "xs"
	// AvatarSizeSmall represents small avatar (32px)
	AvatarSizeSmall AvatarSize = "small"
	// AvatarSizeMedium represents medium avatar (40px, default)
	AvatarSizeMedium AvatarSize = "medium"
	// AvatarSizeLarge represents large avatar (56px)
	AvatarSizeLarge AvatarSize = "large"
	// AvatarSizeXL represents extra large avatar (80px)
	AvatarSizeXL AvatarSize = "xl"
)

type AvatarStatus 

type AvatarStatus struct {
	Color    Color          // Status color (Success, Warning, Danger, etc.)
	Position StatusPosition // TopLeft, TopRight, BottomLeft, BottomRight
	Size     string         // Custom size (default: 25% of avatar)
}

AvatarStatus represents a status indicator on avatar. Status indicators show online/offline/busy state.

type BadgeOption added in v0.2.0 

type BadgeOption func(*badgeWidget)

BadgeOption configures a Badge widget.

func WithBadgeVariant added in v0.2.0 

func WithBadgeVariant(variant BadgeVariant) BadgeOption

WithBadgeVariant sets the visual variant of the badge.

type BadgeTheme added in v0.2.0 

type BadgeTheme struct {
	// BorderRadius is the corner radius of all badge variants (e.g. "20px", "999px" for pill).
	BorderRadius string
	// Gap is the space between the dot and the label text (e.g. "5px").
	Gap string
	// StatusPadding is the padding for status badges (ok/warn/error/idle).
	StatusPadding string
	// TagPadding is the padding for brand tag badges (blue/accent).
	TagPadding string
	// FontSize is the base font size for status/ghost/info badges (e.g. "11px").
	FontSize string
	// FontWeight is the font weight for status/ghost/info badges (e.g. "600").
	FontWeight string
	// TagFontSize is the font size for brand tag badges (e.g. "10px").
	TagFontSize string
	// TagFontWeight is the font weight for brand tag badges (e.g. "700").
	TagFontWeight string
	// TagLetterSpacing is the letter-spacing for brand tag badges (e.g. "0.06em").
	TagLetterSpacing string
	// DotSize is the width and height of the status dot indicator (e.g. "6px").
	DotSize string
}

BadgeTheme defines badge-specific theme properties.

type BadgeVariant added in v0.2.0 

type BadgeVariant string

BadgeVariant controls the visual style of a Badge. 

const (
	// BadgeVariantOk is the success status variant (green pill with dot).
	BadgeVariantOk BadgeVariant = "ok"
	// BadgeVariantWarn is the warning status variant (amber pill with dot).
	BadgeVariantWarn BadgeVariant = "warn"
	// BadgeVariantError is the error status variant (red pill with dot).
	BadgeVariantError BadgeVariant = "error"
	// BadgeVariantIdle is the idle status variant (gray pill with dot).
	BadgeVariantIdle BadgeVariant = "idle"
	// BadgeVariantBlue is a brand tag variant with primary tint (uppercase, no dot).
	BadgeVariantBlue BadgeVariant = "blue"
	// BadgeVariantAccent is a brand tag variant with secondary tint (uppercase, no dot).
	BadgeVariantAccent BadgeVariant = "accent"
	// BadgeVariantGhost is a border-only variant with no fill.
	BadgeVariantGhost BadgeVariant = "ghost"
	// BadgeVariantPurple is a purple-tinted variant.
	BadgeVariantPurple BadgeVariant = "purple"
	// BadgeVariantInfo is a primary-tinted info variant (not uppercase).
	BadgeVariantInfo BadgeVariant = "info"
)

type BaseWidget 

type BaseWidget struct {
	// ID is the HTML element ID attribute
	ID string

	// ClassName contains additional CSS classes to apply to the element
	ClassName string

	// Style contains programmatic inline styles
	Style *Style

	// Attrs contains custom HTML attributes to add to the element
	Attrs templ.Attributes
}

BaseWidget contains common properties that can be embedded in all widget implementations. It provides standard HTML attributes and styling capabilities.

func (*BaseWidget) WithAttr 

func (b *BaseWidget) WithAttr(name, value string) *BaseWidget

WithAttr adds a custom HTML attribute to a BaseWidget and returns it for method chaining.

func (*BaseWidget) WithClassName 

func (b *BaseWidget) WithClassName(className string) *BaseWidget

WithClassName adds CSS classes to a BaseWidget and returns it for method chaining.

func (*BaseWidget) WithID 

func (b *BaseWidget) WithID(id string) *BaseWidget

WithID sets the ID attribute on a BaseWidget and returns it for method chaining.

func (*BaseWidget) WithStyle 

func (b *BaseWidget) WithStyle(style *Style) *BaseWidget

WithStyle sets the Style on a BaseWidget and returns it for method chaining.

type Border 

type Border struct {
	// Width sets the border width (e.g., "1px", "2px")
	Width string

	// Style sets the border style (solid, dashed, dotted, etc.)
	Style BorderStyle

	// Color sets the border color
	Color Color

	// Radius sets the border radius for rounded corners (e.g., "4px", "50%")
	Radius string
}

Border represents border styling properties.

func NewBorder 

func NewBorder(width string, style BorderStyle, color Color) *Border

NewBorder creates a new Border with the specified properties.

Example

ExampleNewBorder demonstrates basic border creation. 

border := NewBorder("2px", BorderStyleSolid, ColorDanger())

container := Container(ContainerConfig{
	Border:  border,
	Padding: AllEdges(16),
	Children: []Widget{
		Text("Container with border"),
	},
})

fmt.Print(renderWidgetToString(container))

Output:
<div class="glux-container" style="padding: 16px 16px 16px 16px; border: 2px solid #dc2626"><span class="glux-text">Container with border</span></div>

func NewBorderRadius 

func NewBorderRadius(width string, style BorderStyle, color Color, radius string) *Border

NewBorderRadius creates a new Border with rounded corners.

Example

ExampleNewBorderRadius demonstrates rounded border creation. 

border := NewBorderRadius("1px", BorderStyleDashed, ColorInfo(), "12px")

container := Container(ContainerConfig{
	Border:     border,
	Background: ColorLight(),
	Padding:    AllEdges(12),
	Children: []Widget{
		Text("Rounded border container"),
	},
})

fmt.Print(renderWidgetToString(container))

Output:
<div class="glux-container" style="padding: 12px 12px 12px 12px; background: #f8f9fa; border: 1px dashed #0ea5e9; border-radius: 12px"><span class="glux-text">Rounded border container</span></div>

type BorderStyle 

type BorderStyle string

BorderStyle represents CSS border-style values 

const (
	// BorderStyleNone represents no border
	BorderStyleNone BorderStyle = "none"
	// BorderStyleSolid represents solid border style
	BorderStyleSolid BorderStyle = "solid"
	// BorderStyleDashed represents dashed border style
	BorderStyleDashed BorderStyle = "dashed"
	// BorderStyleDotted represents dotted border style
	BorderStyleDotted BorderStyle = "dotted"
	// BorderStyleDouble represents double border style
	BorderStyleDouble BorderStyle = "double"
	// BorderStyleGroove represents groove border style
	BorderStyleGroove BorderStyle = "groove"
	// BorderStyleRidge represents ridge border style
	BorderStyleRidge BorderStyle = "ridge"
	// BorderStyleInset represents inset border style
	BorderStyleInset BorderStyle = "inset"
	// BorderStyleOutset represents outset border style
	BorderStyleOutset BorderStyle = "outset"
)

type BrandConfig added in v0.2.0 

type BrandConfig struct {
	Logo Widget
	// Wordmark is the brand name text displayed next to the logo.
	Wordmark string
	// Sub is an optional small sub-label below the wordmark (e.g. "A Company Name").
	Sub string
	BaseWidget
}

BrandConfig configures the Brand widget.

type ButtonOption 

type ButtonOption func(*buttonWidget)

ButtonOption represents a configuration option for Button widgets. This follows the functional options pattern for progressive enhancement.

func WithButtonAttr 

func WithButtonAttr(name, value string) ButtonOption

WithButtonAttr adds a custom HTML attribute to the button.

func WithButtonClass 

func WithButtonClass(className string) ButtonOption

WithButtonClass adds CSS classes to the button.

func WithButtonDisabled 

func WithButtonDisabled(disabled bool) ButtonOption

WithButtonDisabled sets whether the button is disabled.

func WithButtonID 

func WithButtonID(id string) ButtonOption

WithButtonID sets the HTML ID attribute for the button.

func WithButtonOnClick 

func WithButtonOnClick(callback ActionCallback) ButtonOption

WithButtonOnClick sets the callback function for button clicks. The callback will be automatically registered with an HTTP endpoint.

func WithButtonSize 

func WithButtonSize(size ButtonSize) ButtonOption

WithButtonSize sets the button size (small, medium, large).

func WithButtonStyle 

func WithButtonStyle(style *Style) ButtonOption

WithButtonStyle sets custom styling for the button.

func WithButtonType added in v0.2.0 

func WithButtonType(t ButtonType) ButtonOption

WithButtonType sets the HTML type attribute of the button. Use ButtonTypeSubmit to submit an enclosing Form widget.

func WithButtonVariant 

func WithButtonVariant(variant ButtonVariant) ButtonOption

WithButtonVariant sets the button variant (primary, secondary, danger, etc.).

type ButtonSize 

type ButtonSize string

ButtonSize represents different button size variants. 

const (
	// ButtonSizeSmall represents small button
	ButtonSizeSmall ButtonSize = "small"
	// ButtonSizeMedium represents medium button (default)
	ButtonSizeMedium ButtonSize = "medium"
	// ButtonSizeLarge represents large button
	ButtonSizeLarge ButtonSize = "large"
)

type ButtonTheme 

type ButtonTheme struct {
	BorderRadius   string
	FontWeight     string
	PaddingSmall   string
	PaddingMedium  string
	PaddingLarge   string
	FontSizeSmall  string
	FontSizeMedium string
	FontSizeLarge  string
	Transition     string
}

ButtonTheme defines button-specific theme properties.

type ButtonType added in v0.2.0 

type ButtonType string

ButtonType specifies the HTML type attribute of a button element. 

const (
	ButtonTypeButton ButtonType = "button" // default — does not submit a form
	ButtonTypeSubmit ButtonType = "submit" // submits the enclosing Form widget
	ButtonTypeReset  ButtonType = "reset"  // resets the enclosing Form widget
)

Button type constants for use with WithButtonType.

type ButtonVariant 

type ButtonVariant string

ButtonVariant represents different button style variants. 

const (
	// ButtonVariantPrimary represents primary action button (blue)
	ButtonVariantPrimary ButtonVariant = "primary"
	// ButtonVariantSecondary represents secondary action button (gray)
	ButtonVariantSecondary ButtonVariant = "secondary"
	// ButtonVariantSuccess represents success action button (green)
	ButtonVariantSuccess ButtonVariant = "success"
	// ButtonVariantInfo represents info action button (light blue)
	ButtonVariantInfo ButtonVariant = "info"
	// ButtonVariantWarning represents warning action button (yellow)
	ButtonVariantWarning ButtonVariant = "warning"
	// ButtonVariantDanger represents danger action button (red)
	ButtonVariantDanger ButtonVariant = "danger"
	// ButtonVariantLight represents light button (light gray)
	ButtonVariantLight ButtonVariant = "light"
	// ButtonVariantDark represents dark button (dark gray)
	ButtonVariantDark ButtonVariant = "dark"
	// ButtonVariantLink represents link-style button (no background)
	ButtonVariantLink ButtonVariant = "link"
	// ButtonVariantOutline represents outline button (border only)
	ButtonVariantOutline ButtonVariant = "outline"
	// ButtonVariantTertiary represents ghost/text-only button (lowest emphasis).
	// Use for toolbars, in-row actions, and dismiss links.
	ButtonVariantTertiary ButtonVariant = "tertiary"
	// ButtonVariantTertiaryDark is a ghost button optimised for permanently dark surfaces
	// (topbar, drawer header). Uses dark-surface foreground and a subtle dark border.
	ButtonVariantTertiaryDark ButtonVariant = "tertiary-dark"
)

type CardConfig 

type CardConfig struct {
	// Children contains the child widgets to render inside the card
	Children []Widget

	// Padding sets the internal spacing around children
	Padding EdgeInsets

	// Margin sets the external spacing around the card
	Margin EdgeInsets

	// Width sets the card width (CSS value like "300px", "100%", "auto")
	Width string

	// Height sets the card height (CSS value)
	Height string

	// Elevation sets the shadow depth (0-5)
	// 0 = no shadow, 5 = maximum elevation
	Elevation CardElevation

	// Background sets the card background color
	Background Color

	// BorderRadius sets rounded corner radius (e.g., "8px", "12px")
	BorderRadius string

	// OnClick optional callback for interactive cards
	OnClick ActionCallback

	// BaseWidget properties for ID, classes, and attributes
	BaseWidget
}

CardConfig configures a Card widget. Card provides an elevated surface container inspired by Material Design, offering visual hierarchy through elevation and styling.

type CardElevation 

type CardElevation int

CardElevation represents Material Design elevation levels for Card widgets. Elevation controls the shadow depth to create visual hierarchy. 

const (
	// CardElevation0 represents no elevation (flat card)
	CardElevation0 CardElevation = 0
	// CardElevation1 represents minimal elevation (subtle shadow)
	CardElevation1 CardElevation = 1
	// CardElevation2 represents low elevation (light shadow)
	CardElevation2 CardElevation = 2
	// CardElevation3 represents medium elevation (default, moderate shadow)
	CardElevation3 CardElevation = 3
	// CardElevation4 represents high elevation (prominent shadow)
	CardElevation4 CardElevation = 4
	// CardElevation5 represents maximum elevation (strong shadow)
	CardElevation5 CardElevation = 5
)

type CardTheme 

type CardTheme struct {
	BorderRadius string
	Elevation    string
	Padding      string
}

CardTheme defines card-specific theme properties.

type CheckboxOption 

type CheckboxOption func(*checkboxWidget)

CheckboxOption represents a configuration option for Checkbox widgets.

func WithCheckboxAttr 

func WithCheckboxAttr(name, value string) CheckboxOption

WithCheckboxAttr adds a custom HTML attribute to the checkbox.

func WithCheckboxChecked 

func WithCheckboxChecked(checked bool) CheckboxOption

WithCheckboxChecked sets whether the checkbox is checked by default.

func WithCheckboxClass 

func WithCheckboxClass(className string) CheckboxOption

WithCheckboxClass adds CSS classes to the checkbox.

func WithCheckboxDisabled 

func WithCheckboxDisabled(disabled bool) CheckboxOption

WithCheckboxDisabled sets whether the checkbox is disabled.

func WithCheckboxID 

func WithCheckboxID(id string) CheckboxOption

WithCheckboxID sets the HTML ID attribute for the checkbox.

func WithCheckboxName 

func WithCheckboxName(name string) CheckboxOption

WithCheckboxName sets the name attribute for the checkbox.

func WithCheckboxOnChange 

func WithCheckboxOnChange(callback ActionCallback) CheckboxOption

WithCheckboxOnChange sets the callback function for checkbox changes.

func WithCheckboxRequired 

func WithCheckboxRequired(required bool) CheckboxOption

WithCheckboxRequired sets whether the checkbox is required.

func WithCheckboxSize 

func WithCheckboxSize(size CheckboxSize) CheckboxOption

WithCheckboxSize sets the size for the checkbox.

func WithCheckboxStyle 

func WithCheckboxStyle(style *Style) CheckboxOption

WithCheckboxStyle sets custom styling for the checkbox.

func WithCheckboxValue 

func WithCheckboxValue(value string) CheckboxOption

WithCheckboxValue sets the value attribute for the checkbox.

func WithCheckboxVariant 

func WithCheckboxVariant(variant CheckboxVariant) CheckboxOption

WithCheckboxVariant sets the visual variant for the checkbox.

type CheckboxSize 

type CheckboxSize string

CheckboxSize represents different checkbox size variants. 

const (
	// CheckboxSizeSmall represents small checkbox
	CheckboxSizeSmall CheckboxSize = "small"
	// CheckboxSizeMedium represents medium checkbox (default)
	CheckboxSizeMedium CheckboxSize = "medium"
	// CheckboxSizeLarge represents large checkbox
	CheckboxSizeLarge CheckboxSize = "large"
)

type CheckboxVariant 

type CheckboxVariant string

CheckboxVariant represents different checkbox style variants. 

const (
	// CheckboxVariantStandard represents standard checkbox
	CheckboxVariantStandard CheckboxVariant = "standard"
	// CheckboxVariantSwitch represents switch-style checkbox
	CheckboxVariantSwitch CheckboxVariant = "switch"
)

type Color 

type Color struct {
	// Value contains the CSS color value (hex, rgb, rgba, named color, etc.)
	Value string
}

Color represents a color value that can be used in styling. It supports various color formats and provides common color constants.

func ColorBackground 

func ColorBackground() Color

ColorBackground returns the current theme's background color.

func ColorBlack 

func ColorBlack() Color

ColorBlack returns the current theme's black color.

func ColorBorderStrong added in v0.2.0 

func ColorBorderStrong() Color

ColorBorderStrong returns the stronger border color for dark surfaces or dividers.

func ColorDanger 

func ColorDanger() Color

ColorDanger returns the current theme's danger color.

func ColorDark 

func ColorDark() Color

ColorDark returns the current theme's dark color.

func ColorGray100 

func ColorGray100() Color

ColorGray100 returns the lightest gray color from the current theme.

func ColorGray200 

func ColorGray200() Color

ColorGray200 returns a very light gray color from the current theme.

func ColorGray300 

func ColorGray300() Color

ColorGray300 returns a light gray color from the current theme.

func ColorGray400 

func ColorGray400() Color

ColorGray400 returns a medium-light gray color from the current theme.

func ColorGray500 

func ColorGray500() Color

ColorGray500 returns a medium gray color from the current theme.

func ColorGray600 

func ColorGray600() Color

ColorGray600 returns a medium-dark gray color from the current theme.

func ColorGray700 

func ColorGray700() Color

ColorGray700 returns a dark gray color from the current theme.

func ColorGray800 

func ColorGray800() Color

ColorGray800 returns a very dark gray color from the current theme.

func ColorGray900 

func ColorGray900() Color

ColorGray900 returns the darkest gray color from the current theme.

func ColorInfo 

func ColorInfo() Color

ColorInfo returns the current theme's info color.

func ColorLight 

func ColorLight() Color

ColorLight returns the current theme's light color.

func ColorOnBackground 

func ColorOnBackground() Color

ColorOnBackground returns the current theme's text color for main backgrounds.

func ColorOnPrimary 

func ColorOnPrimary() Color

ColorOnPrimary returns the current theme's text color for primary backgrounds.

func ColorOnSecondary 

func ColorOnSecondary() Color

ColorOnSecondary returns the current theme's text color for secondary backgrounds.

func ColorOnSurface 

func ColorOnSurface() Color

ColorOnSurface returns the current theme's text color for surface backgrounds.

func ColorPrimary 

func ColorPrimary() Color

ColorPrimary returns the current theme's primary color.

func ColorPrimaryDark 

func ColorPrimaryDark() Color

ColorPrimaryDark returns the current theme's dark primary color.

func ColorPrimaryLight 

func ColorPrimaryLight() Color

ColorPrimaryLight returns the current theme's light primary color.

func ColorPrimaryTint added in v0.2.0 

func ColorPrimaryTint() Color

ColorPrimaryTint returns the primary tint color (semi-transparent primary).

func ColorSecondary 

func ColorSecondary() Color

ColorSecondary returns the current theme's secondary color.

func ColorSecondaryDark 

func ColorSecondaryDark() Color

ColorSecondaryDark returns the current theme's dark secondary color.

func ColorSecondaryLight 

func ColorSecondaryLight() Color

ColorSecondaryLight returns the current theme's light secondary color.

func ColorSecondaryTint added in v0.2.0 

func ColorSecondaryTint() Color

ColorSecondaryTint returns the secondary tint color (semi-transparent secondary).

func ColorSuccess 

func ColorSuccess() Color

ColorSuccess returns the current theme's success color.

func ColorSurface 

func ColorSurface() Color

ColorSurface returns the current theme's surface color.

func ColorSurfaceDark 

func ColorSurfaceDark() Color

ColorSurfaceDark returns the current theme's dark surface color.

func ColorSurfaceHover added in v0.2.0 

func ColorSurfaceHover() Color

ColorSurfaceHover returns the subtle overlay color for interactive surface items.

func ColorSurfaceLight 

func ColorSurfaceLight() Color

ColorSurfaceLight returns the current theme's light surface color.

func ColorTransparent 

func ColorTransparent() Color

ColorTransparent returns the current theme's transparent color.

func ColorWarning 

func ColorWarning() Color

ColorWarning returns the current theme's warning color.

func ColorWhite 

func ColorWhite() Color

ColorWhite returns the current theme's white color.

func NewColor 

func NewColor(value string) Color

NewColor creates a new Color with the specified CSS value.

type ColorScheme 

type ColorScheme struct {
	// Primary colors - main brand colors
	Primary      Color // Main primary color for buttons, links, highlights
	PrimaryLight Color // Lighter variant of primary color
	PrimaryDark  Color // Darker variant of primary color

	// Secondary colors - accent colors
	Secondary      Color // Secondary brand color for variety
	SecondaryLight Color // Lighter variant of secondary color
	SecondaryDark  Color // Darker variant of secondary color

	// Semantic colors - convey meaning
	Success Color // Green color for success states
	Info    Color // Blue color for informational content
	Warning Color // Yellow/orange color for warnings
	Danger  Color // Red color for errors and dangerous actions

	// Surface colors - backgrounds and containers
	Background   Color // Main background color for the application
	Surface      Color // Color for surfaces like cards, dialogs
	SurfaceLight Color // Lighter surface color for subtle elevation
	SurfaceDark  Color // Darker surface color for contrast

	// Text colors - text on different backgrounds
	OnPrimary    Color // Text color on primary background
	OnSecondary  Color // Text color on secondary background
	OnBackground Color // Text color on main background
	OnSurface    Color // Text color on surface background
	OnSuccess    Color // Text color on success background
	OnInfo       Color // Text color on info background
	OnWarning    Color // Text color on warning background
	OnDanger     Color // Text color on danger background

	// Neutral colors - legacy support
	Light Color // Light neutral color
	Dark  Color // Dark neutral color
	White Color // Pure white
	Black Color // Pure black

	// Gray scale - consistent gray palette
	Gray100 Color // Lightest gray
	Gray200 Color
	Gray300 Color
	Gray400 Color
	Gray500 Color // Mid gray
	Gray600 Color
	Gray700 Color
	Gray800 Color
	Gray900 Color // Darkest gray

	// Transparent color
	Transparent Color

	// Tint colors — semi-transparent brand colors used for hover states and tinted backgrounds.
	PrimaryTint   Color // e.g. rgba(primary, 0.12) — outline button hover, active nav background
	SecondaryTint Color // e.g. rgba(secondary, 0.12) — accent hover, active count badge bg

	// BorderStrong is a higher-contrast border color for use on dark surfaces or dividers.
	BorderStrong Color

	// SurfaceHover is a subtle overlay color applied on interactive surface items (rows, nav items).
	SurfaceHover Color
}

ColorScheme defines all semantic colors used throughout the UI. It follows Material Design color system principles with primary, secondary, and semantic colors.

type ColumnConfig 

type ColumnConfig struct {
	// Children contains the child widgets to arrange vertically
	Children []Widget

	// Gap sets the spacing between children in pixels
	Gap int

	// MainAxis controls the vertical alignment of children
	MainAxis Alignment

	// CrossAxis controls the horizontal alignment of children
	CrossAxis CrossAlignment

	// MainAxisSize determines how much vertical space the column should occupy
	MainAxisSize MainAxisSize

	// Fill makes the column a flex-filling scroll container (flex: 1; overflow: hidden; min-height: 0).
	// Use this when the column lives inside a flex parent and should absorb remaining height
	// while letting its own children control their overflow independently.
	Fill bool

	// BaseWidget properties for ID, classes, and attributes
	BaseWidget
}

ColumnConfig configures a Column widget. Column arranges its children vertically in a flex layout.

type ComponentThemes 

type ComponentThemes struct {
	Button      *ButtonTheme
	Input       *InputTheme
	Card        *CardTheme
	Nav         *NavTheme
	List        *ListTheme
	StatsStrip  *StatsStripTheme
	ToggleGroup *ToggleGroupTheme
	Badge       *BadgeTheme
	Table       *TableTheme
	Alert       *AlertTheme
	Progress    *ProgressTheme
	Stat        *StatTheme
	Vital       *VitalTheme
	Panel       *PanelTheme
	Drawer      *DrawerTheme
}

ComponentThemes defines component-specific theme overrides.

type ContainerConfig 

type ContainerConfig struct {
	// Children contains the child widgets to render inside the container
	Children []Widget

	// Padding sets the internal spacing around the children
	Padding EdgeInsets

	// Margin sets the external spacing around the container
	Margin EdgeInsets

	// Width sets the container width (CSS value like "300px", "50%", "auto")
	Width string

	// Height sets the container height (CSS value like "200px", "100vh", "auto")
	Height string

	// Background sets the background color
	Background Color

	// Border defines border styling
	Border *Border

	// Alignment controls how children are positioned within the container
	Alignment Alignment

	// BaseWidget properties for ID, classes, and attributes
	BaseWidget
}

ContainerConfig configures a Container widget. Container provides a generic wrapper with padding, styling, and layout control.

type CrossAlignment 

type CrossAlignment string

CrossAlignment represents cross-axis alignment for layout widgets. Cross-axis is perpendicular to the main axis (e.g., horizontal for Column, vertical for Row). 

const (
	// CrossAlignmentStart aligns to the start of the cross axis
	CrossAlignmentStart CrossAlignment = "start"
	// CrossAlignmentEnd aligns to the end of the cross axis
	CrossAlignmentEnd CrossAlignment = "end"
	// CrossAlignmentCenter centers on the cross axis
	CrossAlignmentCenter CrossAlignment = "center"
	// CrossAlignmentStretch stretches across the cross axis
	CrossAlignmentStretch CrossAlignment = "stretch"
)

type CrossAxisSize 

type CrossAxisSize string

CrossAxisSize determines how much space the layout widget should occupy on its cross axis. 

const (
	// CrossAxisSizeMin takes only the minimum space needed
	CrossAxisSizeMin CrossAxisSize = "min"
	// CrossAxisSizeMax takes all available space
	CrossAxisSizeMax CrossAxisSize = "max"
)

type DisplayType 

type DisplayType string

DisplayType represents CSS display property values 

const (
	// DisplayBlock represents block display type
	DisplayBlock DisplayType = "block"
	// DisplayInline represents inline display type
	DisplayInline DisplayType = "inline"
	// DisplayInlineBlock represents inline-block display type
	DisplayInlineBlock DisplayType = "inline-block"
	// DisplayFlex represents flex display type
	DisplayFlex DisplayType = "flex"
	// DisplayInlineFlex represents inline-flex display type
	DisplayInlineFlex DisplayType = "inline-flex"
	// DisplayGrid represents grid display type
	DisplayGrid DisplayType = "grid"
	// DisplayInlineGrid represents inline-grid display type
	DisplayInlineGrid DisplayType = "inline-grid"
	// DisplayNone represents none display type
	DisplayNone DisplayType = "none"
)

type DividerOption added in v0.2.0 

type DividerOption func(*dividerWidget)

DividerOption configures a Divider widget.

func WithDividerDark added in v0.2.0 

func WithDividerDark(dark bool) DividerOption

WithDividerDark uses the BorderStrong token (suitable for dark surfaces).

func WithDividerSpacing added in v0.2.0 

func WithDividerSpacing(v int) DividerOption

WithDividerSpacing sets the vertical margin in pixels.

func WithDividerThickness added in v0.2.0 

func WithDividerThickness(px int) DividerOption

WithDividerThickness sets the border thickness in pixels.

type DrawerConfig added in v0.2.0 

type DrawerConfig struct {
	// Title is the drawer header text.
	Title string
	// Width is the open width of the drawer. Default: "320px".
	Width string
	// Open controls whether the drawer is shown.
	Open bool
	// HeaderActions are optional widgets rendered in the drawer header (e.g. close button).
	HeaderActions []Widget
	// Children are the body widgets, typically DrawerSection instances.
	Children []Widget
	// OnClose is called when the close button is clicked.
	OnClose ActionCallback
	BaseWidget
}

DrawerConfig configures the Drawer widget.

type DrawerSectionConfig added in v0.2.0 

type DrawerSectionConfig struct {
	// Label is the section title.
	Label string
	// Children are the widgets inside the section.
	Children []Widget
}

DrawerSectionConfig configures a DrawerSection.

type DrawerTheme added in v0.2.0 

type DrawerTheme struct {
	// AnimationDuration is the CSS duration for the open/close slide animation (e.g. "220ms").
	// Default: "200ms".
	AnimationDuration string
	// AnimationEasing is the CSS timing function for the slide animation (e.g. "cubic-bezier(0.2, 0.8, 0.2, 1)").
	// Default: "ease".
	AnimationEasing string
}

DrawerTheme defines motion properties for the Drawer widget.

type EdgeInsets 

type EdgeInsets struct {
	Top    int // Top spacing in pixels
	Right  int // Right spacing in pixels
	Bottom int // Bottom spacing in pixels
	Left   int // Left spacing in pixels
}

EdgeInsets represents spacing values for padding and margin. It follows Flutter's EdgeInsets pattern for intuitive spacing control.

func AllEdges 

func AllEdges(value int) EdgeInsets

AllEdges creates EdgeInsets with the same value on all sides. This is equivalent to Flutter's EdgeInsets.all().

Example

ExampleEdgeInsets demonstrates spacing helper functions. 

edges := AllEdges(16)
fmt.Printf("Top: %d, Right: %d, Bottom: %d, Left: %d", edges.Top, edges.Right, edges.Bottom, edges.Left)

Output:
Top: 16, Right: 16, Bottom: 16, Left: 16

func HorizontalEdges 

func HorizontalEdges(horizontal int) EdgeInsets

HorizontalEdges creates EdgeInsets with horizontal spacing only. This is equivalent to Flutter's EdgeInsets.symmetric(horizontal: value).

Example

ExampleHorizontalEdges shows horizontal-only spacing. 

edges := HorizontalEdges(20)
fmt.Printf("Top: %d, Right: %d, Bottom: %d, Left: %d", edges.Top, edges.Right, edges.Bottom, edges.Left)

Output:
Top: 0, Right: 20, Bottom: 0, Left: 20

func OnlyEdges 

func OnlyEdges(top, right, bottom, left int) EdgeInsets

OnlyEdges creates EdgeInsets with individual control over each side. This is equivalent to Flutter's EdgeInsets.only().

Example

ExampleOnlyEdges demonstrates individual edge control for spacing. 

// Create EdgeInsets with different values for each side
edges := OnlyEdges(5, 10, 15, 20) // top, right, bottom, left
fmt.Printf("Top: %d, Right: %d, Bottom: %d, Left: %d", edges.Top, edges.Right, edges.Bottom, edges.Left)

Output:
Top: 5, Right: 10, Bottom: 15, Left: 20

func SymmetricEdges 

func SymmetricEdges(vertical, horizontal int) EdgeInsets

SymmetricEdges creates EdgeInsets with different vertical and horizontal spacing. This is equivalent to Flutter's EdgeInsets.symmetric(vertical: v, horizontal: h).

Example

ExampleSymmetricEdges shows different vertical and horizontal spacing. 

edges := SymmetricEdges(8, 24)
fmt.Printf("Top: %d, Right: %d, Bottom: %d, Left: %d", edges.Top, edges.Right, edges.Bottom, edges.Left)

Output:
Top: 8, Right: 24, Bottom: 8, Left: 24

func VerticalEdges 

func VerticalEdges(vertical int) EdgeInsets

VerticalEdges creates EdgeInsets with vertical spacing only. This is equivalent to Flutter's EdgeInsets.symmetric(vertical: value).

Example

ExampleVerticalEdges demonstrates vertical-only spacing. 

edges := VerticalEdges(16)
fmt.Printf("Top: %d, Right: %d, Bottom: %d, Left: %d", edges.Top, edges.Right, edges.Bottom, edges.Left)

Output:
Top: 16, Right: 0, Bottom: 16, Left: 0

type EyebrowOption added in v0.2.0 

type EyebrowOption func(*eyebrowWidget)

EyebrowOption configures an Eyebrow widget.

func WithEyebrowVariant added in v0.2.0 

func WithEyebrowVariant(variant EyebrowVariant) EyebrowOption

WithEyebrowVariant sets the color variant for the Eyebrow.

type EyebrowVariant added in v0.2.0 

type EyebrowVariant string

EyebrowVariant controls the text color of the Eyebrow widget. 

const (
	// EyebrowVariantDefault is the default muted text color.
	EyebrowVariantDefault EyebrowVariant = ""
	// EyebrowVariantDark renders the eyebrow in dark ink.
	EyebrowVariantDark EyebrowVariant = "dark"
	// EyebrowVariantBlue renders the eyebrow in ColorPrimary().
	EyebrowVariantBlue EyebrowVariant = "blue"
	// EyebrowVariantAccent renders the eyebrow in ColorSecondary().
	EyebrowVariantAccent EyebrowVariant = "accent"
)

type FlexDirection 

type FlexDirection string

FlexDirection represents CSS flex-direction values for flex containers. 

const (
	// FlexDirectionRow represents horizontal left-to-right direction
	FlexDirectionRow FlexDirection = "row"
	// FlexDirectionRowReverse represents horizontal right-to-left direction
	FlexDirectionRowReverse FlexDirection = "row-reverse"
	// FlexDirectionColumn represents vertical top-to-bottom direction
	FlexDirectionColumn FlexDirection = "column"
	// FlexDirectionColumnReverse represents vertical bottom-to-top direction
	FlexDirectionColumnReverse FlexDirection = "column-reverse"
)

type FlexWrap 

type FlexWrap string

FlexWrap represents CSS flex-wrap values for flex containers. 

const (
	// FlexWrapNoWrap keeps items on single line
	FlexWrapNoWrap FlexWrap = "nowrap"
	// FlexWrapWrap allows items to wrap to new lines as needed
	FlexWrapWrap FlexWrap = "wrap"
	// FlexWrapWrapReverse allows items to wrap to new lines in reverse order
	FlexWrapWrapReverse FlexWrap = "wrap-reverse"
)

type FormConfig added in v0.2.0 

type FormConfig struct {
	// OnSubmit is called when the form is submitted (Enter key or submit button click).
	// All named inputs inside the form are included in the single request automatically.
	OnSubmit ActionCallback
	// Children are the form's content widgets.
	Children []Widget
	BaseWidget
}

FormConfig configures a Form widget.

type HTMLBuilder 

type HTMLBuilder struct {
	// contains filtered or unexported fields
}

HTMLBuilder generates complete HTML pages

func (*HTMLBuilder) Build 

func (h *HTMLBuilder) Build(ctx context.Context, body Widget) string

Build generates a complete HTML page with the given body widget

func (*HTMLBuilder) BuildMinimal 

func (h *HTMLBuilder) BuildMinimal(ctx context.Context, body Widget) string

BuildMinimal generates a minimal HTML page (useful for partial updates)

type HTMLWrapperFunc 

type HTMLWrapperFunc func(ctx context.Context, app *App, body Widget) string

HTMLWrapperFunc allows complete customization of HTML generation

type HeadingLevel 

type HeadingLevel int

HeadingLevel represents HTML heading levels (h1-h6). 

const (
	// HeadingLevel1 represents h1 - Main page heading
	HeadingLevel1 HeadingLevel = 1
	// HeadingLevel2 represents h2 - Section heading
	HeadingLevel2 HeadingLevel = 2
	// HeadingLevel3 represents h3 - Subsection heading
	HeadingLevel3 HeadingLevel = 3
	// HeadingLevel4 represents h4 - Sub-subsection heading
	HeadingLevel4 HeadingLevel = 4
	// HeadingLevel5 represents h5 - Minor heading
	HeadingLevel5 HeadingLevel = 5
	// HeadingLevel6 represents h6 - Smallest heading
	HeadingLevel6 HeadingLevel = 6
)

type IconOption 

type IconOption func(*iconWidget)

IconOption defines functional options for Icon configuration. Use these options to customize icon appearance, size, color, and styling.

func WithIconClass 

func WithIconClass(className string) IconOption

WithIconClass adds additional CSS classes to the icon element. Use this for custom styling beyond the built-in options.

Example: 

gluxui.Icon(gluxui.IconUser, gluxui.WithIconClass("custom-icon-style"))

func WithIconColor 

func WithIconColor(color Color) IconOption

WithIconColor sets the color of the icon using theme-aware color functions. Colors automatically adapt to the current theme (light or dark mode).

Available semantic colors:

  • ColorPrimary(): Primary theme color
  • ColorSecondary(): Secondary theme color
  • ColorSuccess(): Success/positive indication
  • ColorWarning(): Warning indication
  • ColorDanger(): Danger/error indication
  • ColorInfo(): Information indication
  • ColorOnSurface(): Text/foreground color (default)

Example: 

gluxui.Icon(gluxui.IconHeart, gluxui.WithIconColor(gluxui.ColorDanger()))
gluxui.Icon(gluxui.IconCheck, gluxui.WithIconColor(gluxui.ColorSuccess()))

func WithIconID 

func WithIconID(id string) IconOption

WithIconID sets the HTML ID attribute for the icon element. Use this when you need to reference the icon in CSS or JavaScript.

Example: 

gluxui.Icon(gluxui.IconHome, gluxui.WithIconID("home-icon"))

func WithIconSize 

func WithIconSize(size IconSize) IconOption

WithIconSize sets the size of the icon using predefined size constants.

Available sizes:

  • IconSizeSmall: 14px
  • IconSizeMedium: 16px (default)
  • IconSizeLarge: 20px
  • IconSizeXLarge: 24px
  • IconSize2X: 32px
  • IconSize3X: 48px

Example: 

gluxui.Icon(gluxui.IconUser, gluxui.WithIconSize(gluxui.IconSizeLarge))

func WithIconStyle 

func WithIconStyle(style *Style) IconOption

WithIconStyle sets custom inline CSS styles for the icon. Use this for programmatic styling that doesn't fit predefined options.

Example: 

customStyle := &gluxui.Style{
    Margin: gluxui.AllEdges(8),
}
gluxui.Icon(gluxui.IconSettings, gluxui.WithIconStyle(customStyle))

type IconSize 

type IconSize string

IconSize represents different icon size variants. 

const (
	// IconSizeSmall represents small icon (0.75rem)
	IconSizeSmall IconSize = "small"
	// IconSizeMedium represents medium icon (1rem, default)
	IconSizeMedium IconSize = "medium"
	// IconSizeLarge represents large icon (1.25rem)
	IconSizeLarge IconSize = "large"
	// IconSizeXLarge represents extra large icon (1.5rem)
	IconSizeXLarge IconSize = "xlarge"
	// IconSize2X represents 2x icon (2rem)
	IconSize2X IconSize = "2x"
	// IconSize3X represents 3x icon (3rem)
	IconSize3X IconSize = "3x"
)

type IconStyle 

type IconStyle string

IconStyle represents Font Awesome icon styles. 

const (
	// IconStyleSolid represents Font Awesome solid icons (fas)
	IconStyleSolid IconStyle = "fas"
	// IconStyleRegular represents Font Awesome regular icons (far)
	IconStyleRegular IconStyle = "far"
	// IconStyleLight represents Font Awesome light icons (fal) - Pro only
	IconStyleLight IconStyle = "fal"
	// IconStyleBrands represents Font Awesome brand icons (fab)
	IconStyleBrands IconStyle = "fab"
)

type ImageObjectFit 

type ImageObjectFit string

ImageObjectFit represents CSS object-fit values for Image widgets. Object-fit controls how an image should be resized to fit its container. 

const (
	// ImageObjectFitCover scales image to cover container (may crop)
	ImageObjectFitCover ImageObjectFit = "cover"
	// ImageObjectFitContain scales image to fit within container (maintains aspect ratio)
	ImageObjectFitContain ImageObjectFit = "contain"
	// ImageObjectFitFill stretches image to fill container (may distort)
	ImageObjectFitFill ImageObjectFit = "fill"
	// ImageObjectFitNone keeps original size (no scaling)
	ImageObjectFitNone ImageObjectFit = "none"
	// ImageObjectFitScaleDown scales down if needed (never scales up)
	ImageObjectFitScaleDown ImageObjectFit = "scale-down"
)

type ImageOption 

type ImageOption func(*imageWidget)

ImageOption defines functional options for Image configuration. Use these options to customize image appearance, sizing, responsive behavior, and interactivity.

func WithImageAlt 

func WithImageAlt(alt string) ImageOption

WithImageAlt sets the alt text for accessibility and SEO. Alt text should describe the image content for screen readers and search engines.

Example: 

gluxui.Image("/photo.jpg", gluxui.WithImageAlt("Company logo"))

func WithImageBorderRadius 

func WithImageBorderRadius(radius string) ImageOption

WithImageBorderRadius sets rounded corners for the image. Accepts CSS values like "8px", "50%" (for circular), or "12px".

Example: 

gluxui.Image("/avatar.jpg",
    gluxui.WithImageBorderRadius("50%"), // Circular image
)

func WithImageClass 

func WithImageClass(className string) ImageOption

WithImageClass adds additional CSS classes to the image element.

Example: 

gluxui.Image("/photo.jpg", gluxui.WithImageClass("featured-image"))

func WithImageHeight 

func WithImageHeight(height string) ImageOption

WithImageHeight sets only the height, allowing width to scale automatically. Accepts CSS size values like "300px", "100%", "50vh", or "auto".

Example: 

gluxui.Image("/photo.jpg", gluxui.WithImageHeight("400px"))

func WithImageID 

func WithImageID(id string) ImageOption

WithImageID sets the HTML ID attribute for the image element.

Example: 

gluxui.Image("/logo.png", gluxui.WithImageID("company-logo"))

func WithImageLazy 

func WithImageLazy(lazy bool) ImageOption

WithImageLazy enables or disables lazy loading for performance optimization. When true, images load only when they enter the viewport.

Example: 

gluxui.Image("/large-photo.jpg", gluxui.WithImageLazy(true))

func WithImageObjectFit 

func WithImageObjectFit(fit ImageObjectFit) ImageOption

WithImageObjectFit sets how the image should be resized to fit its container. Available options: Cover, Contain, Fill, None, ScaleDown

Example: 

gluxui.Image("/photo.jpg",
    gluxui.WithImageSize("200px", "200px"),
    gluxui.WithImageObjectFit(gluxui.ImageObjectFitCover),
)

func WithImageOnClick 

func WithImageOnClick(callback ActionCallback) ImageOption

WithImageOnClick adds a click callback for interactive images. Use this to make images clickable and trigger actions.

Example: 

gluxui.Image("/product.jpg",
    gluxui.WithImageOnClick(func(ctx gluxui.ActionContext) error {
        return showProductDetails(productID)
    }),
)

func WithImageSize 

func WithImageSize(width, height string) ImageOption

WithImageSize sets both width and height of the image. Accepts CSS size values like "300px", "100%", "50vw", or "auto".

Example: 

gluxui.Image("/photo.jpg", gluxui.WithImageSize("400px", "300px"))

func WithImageSizes 

func WithImageSizes(sizes string) ImageOption

WithImageSizes sets responsive size hints for different viewport widths. Format: "(max-width: 600px) 100vw, 50vw"

Example: 

gluxui.Image("/hero.jpg",
    gluxui.WithImageSizes("(max-width: 600px) 100vw, 50vw"),
)

func WithImageSrcSet 

func WithImageSrcSet(srcset string) ImageOption

WithImageSrcSet sets responsive image sources for different screen sizes. Format: "image-320w.jpg 320w, image-640w.jpg 640w, image-1024w.jpg 1024w"

Example: 

gluxui.Image("/hero.jpg",
    gluxui.WithImageSrcSet("hero-320w.jpg 320w, hero-640w.jpg 640w"),
)

func WithImageStyle 

func WithImageStyle(style *Style) ImageOption

WithImageStyle sets custom inline CSS styles for the image.

Example: 

gluxui.Image("/photo.jpg",
    gluxui.WithImageStyle(&gluxui.Style{
        Margin: gluxui.AllEdges(16),
    }),
)

func WithImageWidth 

func WithImageWidth(width string) ImageOption

WithImageWidth sets only the width, allowing height to scale automatically. Accepts CSS size values like "300px", "100%", "50vw", or "auto".

Example: 

gluxui.Image("/photo.jpg", gluxui.WithImageWidth("100%"))

type InputTheme 

type InputTheme struct {
	BorderRadius   string
	BorderWidth    string
	PaddingSmall   string
	PaddingMedium  string
	PaddingLarge   string
	FontSizeSmall  string
	FontSizeMedium string
	FontSizeLarge  string
	FontWeight     string
}

InputTheme defines input/textfield/select/checkbox theme properties.

type InputType 

type InputType string

InputType represents HTML input type values for TextField widgets. 

const (
	// InputTypeText represents standard text input
	InputTypeText InputType = "text"
	// InputTypeEmail represents email input with validation
	InputTypeEmail InputType = "email"
	// InputTypePassword represents password input (hidden text)
	InputTypePassword InputType = "password"
	// InputTypeNumber represents numeric input
	InputTypeNumber InputType = "number"
	// InputTypeTel represents telephone number input
	InputTypeTel InputType = "tel"
	// InputTypeURL represents URL input with validation
	InputTypeURL InputType = "url"
	// InputTypeSearch represents search input
	InputTypeSearch InputType = "search"
	// InputTypeDate represents date picker input
	InputTypeDate InputType = "date"
	// InputTypeTime represents time picker input
	InputTypeTime InputType = "time"
	// InputTypeDatetimeLocal represents datetime picker input
	InputTypeDatetimeLocal InputType = "datetime-local"
)

type JustifyContent 

type JustifyContent string

JustifyContent represents CSS justify-content values (main axis alignment for flex). 

const (
	// JustifyContentFlexStart places items at start of container
	JustifyContentFlexStart JustifyContent = "flex-start"
	// JustifyContentFlexEnd places items at end of container
	JustifyContentFlexEnd JustifyContent = "flex-end"
	// JustifyContentCenter centers items
	JustifyContentCenter JustifyContent = "center"
	// JustifyContentSpaceBetween distributes space between items
	JustifyContentSpaceBetween JustifyContent = "space-between"
	// JustifyContentSpaceAround distributes space around items
	JustifyContentSpaceAround JustifyContent = "space-around"
	// JustifyContentSpaceEvenly distributes space evenly
	JustifyContentSpaceEvenly JustifyContent = "space-evenly"
)

type ListConfig added in v0.2.0 

type ListConfig struct {
	// Children are ListItem widgets.
	Children []Widget
	// EmptyLabel is shown when Children is empty.
	EmptyLabel string
	// Scrollable makes the list a flex-filling scroll container (flex: 1; overflow-y: auto; min-height: 0).
	// Use this when the list lives inside a flex column and should absorb remaining height.
	Scrollable bool
	BaseWidget
}

ListConfig configures the List widget.

type ListItemConfig added in v0.2.0 

type ListItemConfig struct {
	// Text is the main item text.
	Text string
	// Subtitle is an optional second-line caption rendered below the main text.
	// When non-empty the row uses a two-line layout; Meta badges appear on the same line.
	Subtitle string
	// Time is an optional timestamp shown on the right in monospace (single-line layout only).
	Time string
	// Checkable shows a checkbox on the left.
	Checkable bool
	// Deletable shows a delete button on the right.
	Deletable bool
	// Checked is the checked state (when Checkable is true).
	Checked bool
	// Done dims and strikes through the text.
	Done bool
	// Meta are optional widgets shown between text and timestamp (e.g. Badge widgets).
	Meta []Widget
	// OnCheck is called when the checkbox is toggled.
	OnCheck ActionCallback
	// OnDelete is called when the delete button is clicked.
	OnDelete ActionCallback
	// OnClick is called when the item row is clicked.
	OnClick ActionCallback
	BaseWidget
}

ListItemConfig configures a ListItem widget.

type ListTheme added in v0.2.0 

type ListTheme struct {
	// Padding is the CSS padding applied to the list container (e.g. "12px 28px 16px").
	Padding string
}

ListTheme defines list container appearance.

type MainAxisSize 

type MainAxisSize string

MainAxisSize determines how much space the layout widget should occupy on its main axis. 

const (
	// MainAxisSizeMin takes only the minimum space needed
	MainAxisSizeMin MainAxisSize = "min"
	// MainAxisSizeMax takes all available space
	MainAxisSizeMax MainAxisSize = "max"
)

type Middleware 

type Middleware func(next http.Handler) http.Handler

Middleware defines HTTP middleware

func CORSMiddleware 

func CORSMiddleware(allowOrigin string) Middleware

CORSMiddleware adds CORS headers

type ModalAction 

type ModalAction struct {
	// Text is the button text (required)
	Text string

	// Variant specifies the button style (default: ButtonVariantSecondary)
	Variant ButtonVariant

	// OnAction is the callback when the action is clicked (optional)
	OnAction ActionCallback

	// CloseModal indicates whether clicking this action should close the modal (default: false)
	CloseModal bool

	// Disabled indicates whether the action is disabled (default: false)
	Disabled bool
	// contains filtered or unexported fields
}

ModalAction represents an action button in the modal footer

type ModalConfig 

type ModalConfig struct {
	// Title is the modal header title (optional)
	Title string

	// Content is the main modal content widget (required)
	Content Widget

	// Actions are the footer action buttons (optional)
	Actions []ModalAction

	// Size specifies the modal size (default: ModalSizeMedium)
	Size ModalSize

	// Closeable indicates whether the modal can be closed by clicking outside or pressing Escape (default: true)
	Closeable bool

	// ShowCloseButton indicates whether to show the X close button in the header (default: true if Closeable)
	ShowCloseButton bool

	// OnClose is called when the modal is closed (optional)
	OnClose ActionCallback

	// BaseWidget properties
	BaseWidget
}

ModalConfig configures a Modal dialog

type ModalResponse 

type ModalResponse struct {
	// contains filtered or unexported fields
}

ModalResponse handles modal display and result management

func AlertDialog 

func AlertDialog(title, message string) *ModalResponse

AlertDialog creates an alert modal with a single OK button

func ConfirmDialog 

func ConfirmDialog(title, message string, onConfirm ActionCallback) *ModalResponse

ConfirmDialog creates a confirmation modal with Yes/No buttons

func DeleteConfirmDialog 

func DeleteConfirmDialog(itemName string, onDelete ActionCallback) *ModalResponse

DeleteConfirmDialog creates a delete confirmation modal with appropriate styling

func FormDialog 

func FormDialog(title string, formContent Widget, onSave ActionCallback) *ModalResponse

FormDialog creates a modal for form input with Save/Cancel buttons

func InfoDialog 

func InfoDialog(title string, content Widget) *ModalResponse

InfoDialog creates an informational modal with custom content

func ShowModal 

func ShowModal(config ModalConfig) *ModalResponse

ShowModal displays a modal dialog and returns a ModalResponse for handling the result

func (*ModalResponse) GetError 

func (mr *ModalResponse) GetError() error

GetError returns any error from modal operations

func (*ModalResponse) GetResult 

func (mr *ModalResponse) GetResult() interface{}

GetResult returns the modal result (if any)

func (*ModalResponse) Hide 

func (mr *ModalResponse) Hide() *ActionResult

Hide closes the modal by returning an ActionResult that clears the modal container

func (*ModalResponse) IsVisible 

func (mr *ModalResponse) IsVisible() bool

IsVisible returns whether the modal is currently visible

func (*ModalResponse) Show 

func (mr *ModalResponse) Show() *ActionResult

Show displays the modal by returning an ActionResult that targets the modal container

type ModalSize 

type ModalSize string

ModalSize represents different modal size variants. Modal sizes control the width and maximum height of the dialog. 

const (
	// ModalSizeSmall represents small modal (400px width)
	ModalSizeSmall ModalSize = "small"
	// ModalSizeMedium represents medium modal (600px width, default)
	ModalSizeMedium ModalSize = "medium"
	// ModalSizeLarge represents large modal (800px width)
	ModalSizeLarge ModalSize = "large"
)
type NavTheme struct {
	ItemPaddingVertical   string
	ItemPaddingHorizontal string
	// ItemMarginHorizontal is the horizontal margin around each nav item (default "8px").
	// Also used to align the active border-style item with inactive items.
	ItemMarginHorizontal string
	ItemBorderRadius     string
	ItemGap              string

	// ActiveIndicatorStyle controls the active state visual: "background" (filled highlight,
	// default) or "border" (left accent border, used by sidebar-style themes).
	ActiveIndicatorStyle string
	// ActiveBorderWidth is the left border width for "border" style (e.g. "3px").
	ActiveBorderWidth string
	// ActiveBorderColor is the left border color for "border" style.
	// Empty string falls back to ColorSecondary().
	ActiveBorderColor string
	// ActiveTextColor overrides the text/icon color for active items.
	// When empty: "background" style uses ColorPrimary(), "border" style uses ColorOnSurface().
	ActiveTextColor string
	// ActiveFontWeight sets font-weight for active items.
	// When empty: "background" style uses "600", "border" style applies no font-weight override.
	ActiveFontWeight string

	// InactiveTextColor overrides the text/icon color for inactive items.
	// Default: ColorOnSurface().
	InactiveTextColor string

	// ContentPadding sets the padding of the content area to the right of the nav rail.
	// Default is "40px".
	ContentPadding string
	// IconSize sets the font-size for nav item icons (e.g. "1.25rem", "16px").
	IconSize string
	// SectionPadding sets the padding for the header and footer sections.
	// Default is "16px".
	SectionPadding string

	// SidebarWidth is the advisory default width for Sidebar widgets (e.g. "250px").
	// Individual Sidebar configs always take precedence.
	SidebarWidth string
	// TopbarHeight is the advisory default height for Topbar widgets (e.g. "56px").
	// Individual Topbar configs always take precedence.
	TopbarHeight string
	// SectionLabelSize is the font size for sidebar section labels (e.g. "10px").
	SectionLabelSize string
	// SectionLabelColor is the muted text color for sidebar section labels.
	SectionLabelColor string
	// CountBadgeActiveColor is the color of count badges on active nav items.
	// Empty defaults to ColorSecondary().
	CountBadgeActiveColor string
}

NavTheme defines navigation rail item appearance. 

type NavigationBarConfig struct {
	// Destinations contains the navigation destinations to display (required)
	Destinations []NavigationDestination

	// CurrentIndex is the index of the currently active destination (default: 0)
	// Used for highlighting the active navigation destination
	CurrentIndex int

	// Type determines the position of the navigation bar (default: Bottom)
	Type NavigationBarType

	// Height sets the bar height (default: "60px" for bottom, "56px" for top)
	Height string

	// Background sets the background color (default: ColorSurface())
	Background Color

	// BaseWidget properties for ID, classes, and attributes
	BaseWidget
}

NavigationBarConfig configures a NavigationBar widget. NavigationBar provides horizontal navigation with automatic content management. 

type NavigationBarType int

NavigationBarType defines the positioning of the navigation bar. 

const (
	// NavigationBarTypeBottom positions the bar at the bottom of the screen (default)
	NavigationBarTypeBottom NavigationBarType = iota
	// NavigationBarTypeTop positions the bar at the top of the screen
	NavigationBarTypeTop
)
type NavigationDestination struct {
	// Icon is the widget displayed for this destination (required)
	// Can be Icon, Image, Avatar, or any custom widget
	Icon Widget

	// Label is the display text for the destination (required)
	Label string

	// Content is the widget to display when this destination is selected (required)
	// This is the page content that will be shown in the content area
	Content Widget

	// Disabled makes the destination non-clickable and visually muted
	Disabled bool
}

NavigationDestination represents a single navigation destination in the NavigationBar. Each destination contains an icon widget, label, and the content widget to display when selected. 

type NavigationItem struct {
	// Label is the display text for the navigation item (required)
	Label string

	// Icon is the Font Awesome icon class (required)
	// Use IconHome, IconUser, or any Font Awesome class string
	Icon string

	// Content is the widget to display when this item is selected (required)
	// This is the page content that will be shown in the content area
	Content Widget

	// Disabled makes the item non-clickable and visually muted
	Disabled bool
}

NavigationItem represents a single navigation entry in the NavigationRail. Each item contains a label, icon, and the content widget to display when selected. 

type NavigationRailConfig struct {
	// Items contains the navigation items to display (required)
	Items []NavigationItem

	// CurrentIndex is the index of the currently active item (default: 0)
	// Used for highlighting the active navigation item
	CurrentIndex int

	// Header is an optional widget displayed at the top of the rail
	// Use for branding, logo, or title
	Header Widget

	// Footer is an optional widget displayed at the bottom of the rail
	// Use for actions, theme toggles, or settings
	Footer Widget

	// Width sets the rail width (default: "250px")
	Width string

	// Background sets the background color (default: ColorSurface())
	Background Color

	// BaseWidget properties for ID, classes, and attributes
	BaseWidget
}

NavigationRailConfig configures a NavigationRail widget. NavigationRail provides persistent vertical navigation with automatic content management.

type OOBUpdate added in v0.2.0 

type OOBUpdate struct {
	// TargetID is the id of the element whose innerHTML is replaced.
	TargetID string
	// Widget is the new widget to render as the replacement content.
	Widget Widget
}

OOBUpdate is an additional out-of-band DOM update sent alongside the primary ActionResult. HTMX processes each OOBUpdate independently, replacing the innerHTML of the element whose id matches TargetID.

type Option 

type Option struct {
	// Value is the option value submitted with forms
	Value string
	// Label is the display text for the option
	Label string
	// Disabled indicates if this option is disabled
	Disabled bool
	// Selected indicates if this option is selected by default
	Selected bool
}

Option represents a selectable option for Select widgets.

type Overflow 

type Overflow string

Overflow represents CSS overflow values. 

const (
	// OverflowVisible allows content to not be clipped
	OverflowVisible Overflow = "visible"
	// OverflowHidden clips content
	OverflowHidden Overflow = "hidden"
	// OverflowScroll always shows scrollbars
	OverflowScroll Overflow = "scroll"
	// OverflowAuto shows scrollbars only when needed
	OverflowAuto Overflow = "auto"
)

type PageHeaderConfig added in v0.2.0 

type PageHeaderConfig struct {
	// Eyebrow is the small uppercase label shown above the title.
	Eyebrow string
	// Title is the main page heading.
	Title string
	// Actions are the right-aligned widgets (buttons, etc.).
	Actions []Widget
	// Padding overrides the header padding. Default: NavTheme.ContentPadding or "20px 24px".
	Padding string
	BaseWidget
}

PageHeaderConfig configures the PageHeader widget.

type PanelConfig 

type PanelConfig struct {
	// Header widget displayed at the top of the panel
	// Use gluxui.Heading() or custom widget composition
	Header Widget

	// Content contains the main panel content widgets
	Content []Widget

	// Footer optional widgets displayed at the bottom
	// Use nil or empty slice for no footer
	Footer []Widget

	// HeaderPadding sets padding for the header section
	// Defaults to AllEdges(16)
	HeaderPadding EdgeInsets

	// ContentPadding sets padding for the content section
	// Defaults to AllEdges(16)
	ContentPadding EdgeInsets

	// FooterPadding sets padding for the footer section
	// Defaults to AllEdges(16)
	FooterPadding EdgeInsets

	// Width sets the panel width (CSS value like "300px", "100%", "auto")
	Width string

	// HeaderBackground sets the header background color
	// Defaults to ColorSurfaceLight() (slightly elevated)
	HeaderBackground Color

	// ContentBackground sets the content background color
	// Defaults to ColorSurface() (main surface)
	ContentBackground Color

	// FooterBackground sets the footer background color
	// Defaults to ColorSurfaceLight() (matches header)
	FooterBackground Color

	// BorderRadius sets rounded corner radius for the entire panel
	// Defaults to "8px"
	BorderRadius string

	// Border defines border styling for the entire panel
	// Defaults to 1px solid ColorGray300()
	Border *Border

	// BaseWidget properties for ID, classes, and attributes
	BaseWidget
}

PanelConfig configures a Panel widget with distinct Header, Content, and optional Footer sections

type PanelTheme added in v0.2.0 

type PanelTheme struct {
	// BorderRadius is the default corner radius when not set in PanelConfig (e.g. "8px").
	BorderRadius string
	// DefaultPadding is the default padding in pixels applied to all sections when not set.
	DefaultPadding int
}

PanelTheme defines panel-specific default theme properties.

type Position 

type Position string

Position represents CSS position values. 

const (
	// PositionStatic represents default positioning
	PositionStatic Position = "static"
	// PositionRelative represents relative positioning
	PositionRelative Position = "relative"
	// PositionAbsolute represents absolute positioning
	PositionAbsolute Position = "absolute"
	// PositionFixed represents fixed positioning relative to viewport
	PositionFixed Position = "fixed"
	// PositionSticky represents sticky positioning
	PositionSticky Position = "sticky"
)

type ProgressConfig added in v0.2.0 

type ProgressConfig struct {
	// Value is the current progress value.
	Value int
	// Max is the maximum value (default 100).
	Max int
	// Label is optional text shown below the bar.
	Label string
	// Color overrides the bar fill color. Default: ColorSecondary().
	Color Color
	BaseWidget
}

ProgressConfig configures the Progress widget.

type ProgressTheme added in v0.2.0 

type ProgressTheme struct {
	// BarHeight is the height of the progress track (e.g. "4px").
	BarHeight string
	// BarBorderRadius is the corner radius of the track and fill (e.g. "2px").
	BarBorderRadius string
	// LabelFontSize is the font size of the optional label (e.g. "11px").
	LabelFontSize string
	// LabelMarginTop is the gap between the bar and the label (e.g. "4px").
	LabelMarginTop string
	// LabelFontWeight is the font weight of the label. Empty = no override.
	LabelFontWeight string
	// LabelLetterSpacing is the letter-spacing of the label. Empty = no override.
	LabelLetterSpacing string
}

ProgressTheme defines progress bar-specific theme properties.

type RadioGroupConfig added in v0.2.0 

type RadioGroupConfig struct {
	// Name is shared across all child Radio widgets within the group.
	Name string
	// Children are Radio widgets.
	Children []Widget
	BaseWidget
}

RadioGroupConfig configures a RadioGroup widget.

type RadioOption added in v0.2.0 

type RadioOption func(*radioWidget)

RadioOption configures a Radio widget.

func WithRadioChecked added in v0.2.0 

func WithRadioChecked(checked bool) RadioOption

WithRadioChecked sets the checked state.

func WithRadioDisabled added in v0.2.0 

func WithRadioDisabled(disabled bool) RadioOption

WithRadioDisabled disables the radio button.

func WithRadioName added in v0.2.0 

func WithRadioName(name string) RadioOption

WithRadioName sets the HTML name attribute (groups radio buttons).

func WithRadioOnChange added in v0.2.0 

func WithRadioOnChange(cb ActionCallback) RadioOption

WithRadioOnChange sets the callback triggered on value change.

func WithRadioValue added in v0.2.0 

func WithRadioValue(value string) RadioOption

WithRadioValue sets the HTML value submitted on form submission.

type Router 

type Router struct {
	// contains filtered or unexported fields
}

Router implements basic HTTP routing with middleware support

func (*Router) Handle 

func (r *Router) Handle(pattern string, handler http.Handler)

Handle registers a handler for the given pattern

func (*Router) HandleFunc 

func (r *Router) HandleFunc(pattern string, handler func(http.ResponseWriter, *http.Request), methods ...string)

HandleFunc registers a handler function for the given pattern Optional methods parameter restricts to specific HTTP methods

func (*Router) ServeHTTP 

func (r *Router) ServeHTTP(w http.ResponseWriter, req *http.Request)

ServeHTTP implements http.Handler interface

func (*Router) Use 

func (r *Router) Use(middleware ...Middleware)

Use adds middleware to the router

type RowConfig 

type RowConfig struct {
	// Children contains the child widgets to arrange horizontally
	Children []Widget

	// Gap sets the spacing between children in pixels
	Gap int

	// MainAxis controls the horizontal alignment of children
	MainAxis Alignment

	// CrossAxis controls the vertical alignment of children
	CrossAxis CrossAlignment

	// MainAxisSize determines how much horizontal space the row should occupy
	MainAxisSize MainAxisSize

	// BaseWidget properties for ID, classes, and attributes
	BaseWidget
}

RowConfig configures a Row widget. Row arranges its children horizontally in a flex layout.

type SVGImageOption added in v0.2.0 

type SVGImageOption func(*svgImageWidget)

SVGImageOption configures an SVGImage widget.

func WithSVGSize added in v0.2.0 

func WithSVGSize(width, height string) SVGImageOption

WithSVGSize sets a fixed width and height on the wrapper element. The SVG scales within that box via its viewBox attribute.

type Scannable 

type Scannable interface {
	ScanWidgets(visitor func(Widget) error) error
}

Scannable interface for widgets that contain children and support tree traversal

type SegmentedConfig added in v0.2.0 

type SegmentedConfig struct {
	// Value is the active SegItem value; empty means no selection (stateless/plain mode).
	Value string
	// Plain renders buttons without active-state highlighting.
	Plain bool
	// Size is "sm", "", or "lg".
	Size string
	// Children are SegItem widgets.
	Children []Widget
	// OnChange is called when an item is selected.
	OnChange ActionCallback
	BaseWidget
}

SegmentedConfig configures a Segmented control widget.

type SelectOption 

type SelectOption func(*selectWidget)

SelectOption represents a configuration option for Select widgets.

func WithSelectAttr 

func WithSelectAttr(name, value string) SelectOption

WithSelectAttr adds a custom HTML attribute to the select.

func WithSelectClass 

func WithSelectClass(className string) SelectOption

WithSelectClass adds CSS classes to the select.

func WithSelectDisabled 

func WithSelectDisabled(disabled bool) SelectOption

WithSelectDisabled sets whether the select is disabled.

func WithSelectID 

func WithSelectID(id string) SelectOption

WithSelectID sets the HTML ID attribute for the select.

func WithSelectLabel 

func WithSelectLabel(label string) SelectOption

WithSelectLabel sets the label for the select.

func WithSelectMultiple 

func WithSelectMultiple(multiple bool) SelectOption

WithSelectMultiple sets whether the select allows multiple selections.

func WithSelectName 

func WithSelectName(name string) SelectOption

WithSelectName sets the name attribute for the select.

func WithSelectOnChange 

func WithSelectOnChange(callback ActionCallback) SelectOption

WithSelectOnChange sets the callback function for select changes.

func WithSelectPlaceholder 

func WithSelectPlaceholder(placeholder string) SelectOption

WithSelectPlaceholder sets the placeholder text for the select.

func WithSelectRequired 

func WithSelectRequired(required bool) SelectOption

WithSelectRequired sets whether the select is required.

func WithSelectSelected 

func WithSelectSelected(selected string) SelectOption

WithSelectSelected sets the initially selected value.

func WithSelectSize 

func WithSelectSize(size SelectSize) SelectOption

WithSelectSize sets the size for the select.

func WithSelectStyle 

func WithSelectStyle(style *Style) SelectOption

WithSelectStyle sets custom styling for the select.

func WithSelectVariant 

func WithSelectVariant(variant SelectVariant) SelectOption

WithSelectVariant sets the visual variant for the select.

type SelectSize 

type SelectSize string

SelectSize represents different select size variants. 

const (
	// SelectSizeSmall represents small select
	SelectSizeSmall SelectSize = "small"
	// SelectSizeMedium represents medium select (default)
	SelectSizeMedium SelectSize = "medium"
	// SelectSizeLarge represents large select
	SelectSizeLarge SelectSize = "large"
)

type SelectVariant 

type SelectVariant string

SelectVariant represents different select style variants. 

const (
	// SelectVariantStandard represents standard select
	SelectVariantStandard SelectVariant = "standard"
	// SelectVariantOutlined represents outlined select
	SelectVariantOutlined SelectVariant = "outlined"
	// SelectVariantFilled represents filled select
	SelectVariantFilled SelectVariant = "filled"
)

type ServerAdapter 

type ServerAdapter interface {
	// RegisterRoutes registers GluxUI routes with the framework
	RegisterRoutes(app *App) error

	// Start starts the framework's HTTP server
	// This is called by App.Start() when an adapter is attached
	Start() error
}

ServerAdapter defines the interface for web framework integration

type SidebarConfig added in v0.2.0 

type SidebarConfig struct {
	// Children is the list of sidebar items: SidebarSection, SidebarNavItem, SidebarDivider, SidebarFooter.
	Children []Widget
	// Width overrides the sidebar width. Default: NavTheme.SidebarWidth or "250px".
	Width string
	// Background overrides the background color. Default: ColorSurface().
	Background Color
	BaseWidget
}

SidebarConfig configures the Sidebar widget.

type SidebarNavItemConfig added in v0.2.0 

type SidebarNavItemConfig struct {
	// Value is the identifier emitted on click (optional).
	Value string
	// Label is the display text.
	Label string
	// Icon is any widget rendered as the item icon (SVG, gluxui.Icon, etc.).
	Icon Widget
	// Count shows a badge count on the right; 0 hides the badge.
	Count int
	// Active marks this item as the currently selected one.
	Active bool
	// Disabled makes the item non-interactive.
	Disabled bool
	// OnClick is called when the item is clicked.
	OnClick ActionCallback
	BaseWidget
}

SidebarNavItemConfig configures a SidebarNavItem.

type SpacingScale 

type SpacingScale struct {
	XS int // Extra small spacing
	SM int // Small spacing
	MD int // Medium spacing
	LG int // Large spacing
	XL int // Extra large spacing
}

SpacingScale defines consistent spacing values (placeholder for future implementation).

type StatChipConfig added in v0.2.0 

type StatChipConfig struct {
	// Value is the large metric text.
	Value string
	// Label is the small muted label below the value.
	Label string
	// Color is the dot indicator color (pass a theme color function result, e.g. ColorSuccess()).
	Color Color
}

StatChipConfig configures a single chip inside a StatsStrip.

type StatConfig added in v0.2.0 

type StatConfig struct {
	// Value is the large metric number or text.
	Value string
	// Label is an uppercase eyebrow shown above the value.
	Label string
	// SubLabel is a small caption shown below the value.
	SubLabel string
	// Surface controls dark vs light background treatment.
	Surface StatSurface
	// Color overrides the accent (value) color. Leave empty to use the surface default.
	Color Color
	BaseWidget
}

StatConfig configures the Stat widget.

type StatSurface added in v0.2.0 

type StatSurface string

StatSurface controls the background and accent color of a Stat widget. 

const (
	// StatSurfaceDark renders the value in ColorSecondary() on a dark ink background.
	StatSurfaceDark StatSurface = "dark"
	// StatSurfaceLight renders the value in ColorPrimary() on a light background.
	StatSurfaceLight StatSurface = "light"
)

type StatTheme added in v0.2.0 

type StatTheme struct {
	// Padding is the inner padding of the stat container (e.g. "20px 24px").
	Padding string
	// BorderRadius is the corner radius of the stat container (e.g. "4px").
	BorderRadius string
	// LabelFontSize is the font size of the eyebrow label (e.g. "10px").
	LabelFontSize string
	// LabelFontWeight is the font weight of the eyebrow label (e.g. "600").
	LabelFontWeight string
	// LabelLetterSpacing is the letter-spacing of the eyebrow label (e.g. "0.08em").
	LabelLetterSpacing string
	// LabelMarginBottom is the gap between the eyebrow and the value (e.g. "6px").
	LabelMarginBottom string
	// ValueFontSize is the font size of the large metric value (e.g. "72px").
	ValueFontSize string
	// ValueFontWeight is the font weight of the metric value (e.g. "700").
	ValueFontWeight string
	// SubLabelFontSize is the font size of the sublabel caption (e.g. "12px").
	SubLabelFontSize string
	// SubLabelMarginTop is the gap between the value and the sublabel (e.g. "4px").
	SubLabelMarginTop string
}

StatTheme defines stat widget-specific theme properties.

type StatsStripConfig added in v0.2.0 

type StatsStripConfig struct {
	Chips []StatChipConfig
	BaseWidget
}

StatsStripConfig configures the StatsStrip widget.

type StatsStripTheme added in v0.2.0 

type StatsStripTheme struct {
	// Padding is the CSS padding of the strip container (default "8px 16px").
	Padding string
	// ChipGap is the CSS gap between chips in the strip (default "16px").
	ChipGap string
	// InnerGap is the CSS gap between the dot indicator and the text within a chip (default "4px").
	InnerGap string
	// DotSize is the width and height of the colored dot indicator (default "8px").
	DotSize string
	// FontSize is the font-size for both value and label text (default "12px").
	FontSize string
	// ValueFontWeight is the font-weight for the metric value (default "700").
	ValueFontWeight string
}

StatsStripTheme defines the appearance of StatsStrip and its StatChip children.

type StatusPosition 

type StatusPosition string

StatusPosition represents status badge position on Avatar widgets. Status indicators can be placed at any of the four corners. 

const (
	// StatusTopRight places status indicator at top-right corner
	StatusTopRight StatusPosition = "top-right"
	// StatusTopLeft places status indicator at top-left corner
	StatusTopLeft StatusPosition = "top-left"
	// StatusBottomRight places status indicator at bottom-right corner (default)
	StatusBottomRight StatusPosition = "bottom-right"
	// StatusBottomLeft places status indicator at bottom-left corner
	StatusBottomLeft StatusPosition = "bottom-left"
)

type Style 

type Style struct {
	// Width sets the CSS width property (e.g., "100px", "50%", "auto")
	Width string

	// Height sets the CSS height property (e.g., "200px", "100vh", "auto")
	Height string

	// Padding sets the internal spacing using EdgeInsets
	Padding EdgeInsets

	// Margin sets the external spacing using EdgeInsets
	Margin EdgeInsets

	// Background sets the background color
	Background Color

	// Border defines border styling
	Border *Border

	// Display sets the CSS display property
	Display DisplayType

	// Flex sets the CSS flex property (e.g., "1", "0 0 auto", "1 1 0%")
	Flex string

	// Extra is appended verbatim to the generated style string.
	// Use for properties not yet covered by this struct (e.g., "overflow: hidden; min-height: 0").
	Extra string
}

Style represents CSS styling properties that can be applied to widgets. It provides type-safe access to common CSS properties with Go-friendly naming.

type TableColumn added in v0.2.0 

type TableColumn struct {
	// Header is the column heading text.
	Header string
	// Key maps to the corresponding key in TableRow.Cells.
	Key string
	// Mono renders cell content in a monospace font (useful for numeric columns).
	Mono bool
}

TableColumn defines a single column in a Table.

type TableConfig added in v0.2.0 

type TableConfig struct {
	Columns []TableColumn
	Rows    []TableRow
	BaseWidget
}

TableConfig configures the Table widget.

type TableRow added in v0.2.0 

type TableRow struct {
	Cells  map[string]string
	Status TableRowStatus
}

TableRow holds cell content and optional status for one table row.

type TableRowStatus added in v0.2.0 

type TableRowStatus string

TableRowStatus controls the row highlight color. 

const (
	// TableRowNormal is the default (no highlight) row style.
	TableRowNormal TableRowStatus = ""
	// TableRowWarn highlights the row with an amber tint.
	TableRowWarn TableRowStatus = "warn"
	// TableRowSelected highlights the row with the primary tint.
	TableRowSelected TableRowStatus = "selected"
)

type TableTheme added in v0.2.0 

type TableTheme struct {
	// FontSize is the base font size for table cells (e.g. "12px").
	FontSize string
	// HeaderPadding is the padding for header cells (e.g. "8px 12px").
	HeaderPadding string
	// HeaderFontSize is the font size for header cells (e.g. "10px").
	HeaderFontSize string
	// HeaderLetterSpacing is the letter-spacing for header text (e.g. "0.06em").
	HeaderLetterSpacing string
	// HeaderFontWeight is the font weight for header cells (e.g. "600").
	HeaderFontWeight string
	// CellPadding is the padding for body cells (e.g. "8px 12px").
	CellPadding string
}

TableTheme defines table-specific theme properties.

type TextAlign 

type TextAlign string

TextAlign represents CSS text-align values. 

const (
	// TextAlignLeft represents left-aligned text
	TextAlignLeft TextAlign = "left"
	// TextAlignRight represents right-aligned text
	TextAlignRight TextAlign = "right"
	// TextAlignCenter represents center-aligned text
	TextAlignCenter TextAlign = "center"
	// TextAlignJustify represents justified text
	TextAlignJustify TextAlign = "justify"
)

type TextFieldOption 

type TextFieldOption func(*textFieldWidget)

TextFieldOption represents a configuration option for TextField widgets.

func WithTextFieldAttr 

func WithTextFieldAttr(name, value string) TextFieldOption

WithTextFieldAttr adds a custom HTML attribute to the text field.

func WithTextFieldClass 

func WithTextFieldClass(className string) TextFieldOption

WithTextFieldClass adds CSS classes to the text field.

func WithTextFieldDisabled 

func WithTextFieldDisabled(disabled bool) TextFieldOption

WithTextFieldDisabled sets whether the text field is disabled.

func WithTextFieldID 

func WithTextFieldID(id string) TextFieldOption

WithTextFieldID sets the HTML ID attribute for the text field.

func WithTextFieldMaxLength 

func WithTextFieldMaxLength(maxLength int) TextFieldOption

WithTextFieldMaxLength sets the maximum length for the text field.

func WithTextFieldMinLength 

func WithTextFieldMinLength(minLength int) TextFieldOption

WithTextFieldMinLength sets the minimum length for the text field.

func WithTextFieldName 

func WithTextFieldName(name string) TextFieldOption

WithTextFieldName sets the name attribute for the text field.

func WithTextFieldOnBlur 

func WithTextFieldOnBlur(callback ActionCallback) TextFieldOption

WithTextFieldOnBlur sets the callback function for text field blur events.

func WithTextFieldOnChange 

func WithTextFieldOnChange(callback ActionCallback) TextFieldOption

WithTextFieldOnChange sets the callback function for text field changes.

func WithTextFieldOnFocus 

func WithTextFieldOnFocus(callback ActionCallback) TextFieldOption

WithTextFieldOnFocus sets the callback function for text field focus events.

func WithTextFieldPattern 

func WithTextFieldPattern(pattern string) TextFieldOption

WithTextFieldPattern sets a validation pattern for the text field.

func WithTextFieldPlaceholder 

func WithTextFieldPlaceholder(placeholder string) TextFieldOption

WithTextFieldPlaceholder sets the placeholder text for the text field.

func WithTextFieldPrefixIcon added in v0.2.0 

func WithTextFieldPrefixIcon(icon string) TextFieldOption

WithTextFieldPrefixIcon sets a Font Awesome icon class shown at the left of the input. Example: gluxui.WithTextFieldPrefixIcon(gluxui.IconSearch)

func WithTextFieldReadonly 

func WithTextFieldReadonly(readonly bool) TextFieldOption

WithTextFieldReadonly sets whether the text field is readonly.

func WithTextFieldRequired 

func WithTextFieldRequired(required bool) TextFieldOption

WithTextFieldRequired sets whether the text field is required.

func WithTextFieldSize 

func WithTextFieldSize(size TextFieldSize) TextFieldOption

WithTextFieldSize sets the size for the text field.

func WithTextFieldStyle 

func WithTextFieldStyle(style *Style) TextFieldOption

WithTextFieldStyle sets custom styling for the text field.

func WithTextFieldSuffixIcon added in v0.2.0 

func WithTextFieldSuffixIcon(icon string) TextFieldOption

WithTextFieldSuffixIcon sets a Font Awesome icon class shown at the right of the input.

func WithTextFieldType 

func WithTextFieldType(inputType InputType) TextFieldOption

WithTextFieldType sets the input type for the text field.

func WithTextFieldValue 

func WithTextFieldValue(value string) TextFieldOption

WithTextFieldValue sets the initial value for the text field.

func WithTextFieldVariant 

func WithTextFieldVariant(variant TextFieldVariant) TextFieldOption

WithTextFieldVariant sets the visual variant for the text field.

type TextFieldSize 

type TextFieldSize string

TextFieldSize represents different text field size variants. 

const (
	// TextFieldSizeSmall represents small text field
	TextFieldSizeSmall TextFieldSize = "small"
	// TextFieldSizeMedium represents medium text field (default)
	TextFieldSizeMedium TextFieldSize = "medium"
	// TextFieldSizeLarge represents large text field
	TextFieldSizeLarge TextFieldSize = "large"
)

type TextFieldVariant 

type TextFieldVariant string

TextFieldVariant represents different text field style variants. 

const (
	// TextFieldVariantStandard represents standard text field
	TextFieldVariantStandard TextFieldVariant = "standard"
	// TextFieldVariantOutlined represents outlined text field
	TextFieldVariantOutlined TextFieldVariant = "outlined"
	// TextFieldVariantFilled represents filled text field
	TextFieldVariantFilled TextFieldVariant = "filled"
)

type Theme 

type Theme struct {
	// Name is a human-readable identifier for the theme
	Name string

	// Family identifies the ThemeFamily this theme belongs to (e.g. "default", "my-brand").
	// SwitchToLightTheme / SwitchToDarkTheme use this to stay within the current family.
	Family string

	// ColorScheme defines all semantic colors for the theme
	ColorScheme *ColorScheme

	// Typography defines font families, sizes, and weights
	Typography *Typography

	// Spacing defines consistent spacing scales
	Spacing *SpacingScale

	// Components defines component-specific theme overrides
	Components *ComponentThemes

	// IncludePureCSS controls whether pure-min.css is injected into the page <head>.
	// Set to false when the theme provides its own base styles and does not need pure-css.
	IncludePureCSS bool

	// ExtraCSS lists additional CSS URLs injected into <head> after the base stylesheet.
	ExtraCSS []string
}

Theme represents a complete UI theme configuration. It defines all visual aspects including colors, typography, spacing, and component-specific styling.

func DefaultDarkTheme 

func DefaultDarkTheme() *Theme

DefaultDarkTheme creates the default dark theme.

func DefaultLightTheme 

func DefaultLightTheme() *Theme

DefaultLightTheme creates the default light theme.

func GetCurrentTheme 

func GetCurrentTheme() *Theme

GetCurrentTheme returns the current global theme. This function is thread-safe and can be called from any goroutine.

func NewTheme 

func NewTheme(name string, colorScheme *ColorScheme) *Theme

NewTheme creates a new theme with the specified name and color scheme.

type ThemeBuilder 

type ThemeBuilder struct {
	// contains filtered or unexported fields
}

ThemeBuilder provides a fluent API for creating custom themes.

func NewThemeBuilder 

func NewThemeBuilder(name string) *ThemeBuilder

NewThemeBuilder creates a new theme builder starting with the light theme as base.

Example

ExampleNewThemeBuilder demonstrates custom theme creation using the builder pattern. 

// Create a custom theme
customTheme := NewThemeBuilder("Custom").
	WithPrimaryColor(NewColor("#e11d48")).    // Rose-600
	WithSecondaryColor(NewColor("#7c2d12")).  // Orange-900
	WithBackgroundColor(NewColor("#fef2f2")). // Rose-50
	Build()

// Apply the custom theme
SetTheme(customTheme)

// Create widgets that use the custom theme colors
button := Button("Custom Theme", WithButtonVariant(ButtonVariantPrimary))
fmt.Print(renderWidgetToString(button))

// Reset to default theme
SetTheme(DefaultLightTheme())

Output:
<button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #e11d48; color: #ffffff;">Custom Theme</button>

func (*ThemeBuilder) Build 

func (tb *ThemeBuilder) Build() *Theme

Build returns the constructed theme.

func (*ThemeBuilder) WithBackgroundColor 

func (tb *ThemeBuilder) WithBackgroundColor(color Color) *ThemeBuilder

WithBackgroundColor sets the background color for the theme.

func (*ThemeBuilder) WithPrimaryColor 

func (tb *ThemeBuilder) WithPrimaryColor(color Color) *ThemeBuilder

WithPrimaryColor sets the primary color for the theme.

func (*ThemeBuilder) WithSecondaryColor 

func (tb *ThemeBuilder) WithSecondaryColor(color Color) *ThemeBuilder

WithSecondaryColor sets the secondary color for the theme.

func (*ThemeBuilder) WithSuccessColor 

func (tb *ThemeBuilder) WithSuccessColor(color Color) *ThemeBuilder

WithSuccessColor sets the success color for the theme.

type ThemeFamily added in v0.2.0 

type ThemeFamily struct {
	Name  string
	Light *Theme
	Dark  *Theme
}

ThemeFamily pairs a light and dark variant of a named theme family. Use RegisterThemeFamily to make a family available to SwitchToLightTheme / SwitchToDarkTheme.

func GetThemeFamily added in v0.2.0 

func GetThemeFamily(name string) (*ThemeFamily, bool)

GetThemeFamily returns the registered ThemeFamily for the given name.

type ToggleGroupConfig added in v0.2.0 

type ToggleGroupConfig struct {
	// Value is the currently active ToggleButton value.
	Value string
	// Name, when set, enables picker mode: buttons act as a named form field without
	// firing individual server callbacks. Designed for use inside a Form widget.
	// Mutually exclusive with OnChange.
	Name string
	// Children are ToggleButton widgets.
	Children []Widget
	// OnChange is called when a button is clicked (the clicked value is in ctx.GetFormValue("value")).
	// Do not set this when Name is used.
	OnChange ActionCallback
	BaseWidget
}

ToggleGroupConfig configures a ToggleGroup widget.

type ToggleGroupTheme added in v0.2.0 

type ToggleGroupTheme struct {
	// Picker mode — chip-style buttons used as a named form field.
	PickerPadding       string // default "5px 10px"
	PickerBorderRadius  string // default "2px"
	PickerBorderColor   string // inactive border color; default: ColorGray300()
	PickerFontSize      string // default "10px"
	PickerFontWeight    string // default "700"
	PickerLetterSpacing string // default "0.08em"
	PickerGap           string // gap between chips; default "6px"
	PickerActiveColor   string // active text + border color; default: ColorPrimary()
	PickerInactiveColor string // inactive text color; default: ColorGray600()

	// Tab mode — underline indicator buttons.
	TabPadding              string // default "9px 16px"
	TabFontSize             string // default "13px"
	TabFontWeight           string // default "500"
	TabIndicatorWidth       string // underline thickness; default "2px"
	TabActiveColor          string // active text color; default: ColorOnBackground()
	TabActiveIndicatorColor string // active underline color; default: ColorPrimary()
	TabInactiveColor        string // inactive text color; default: ColorGray500()
}

ToggleGroupTheme defines the appearance of ToggleGroup and its ToggleButton children. It covers two rendering modes: picker (chip row, used when Name is set) and tab (underline).

type TopbarButtonOption added in v0.2.0 

type TopbarButtonOption func(*topbarButtonWidget)

TopbarButtonOption configures a TopbarButton.

func WithTopbarButtonBadge added in v0.2.0 

func WithTopbarButtonBadge(count string) TopbarButtonOption

WithTopbarButtonBadge sets the notification count shown as a dot badge.

func WithTopbarButtonOnClick added in v0.2.0 

func WithTopbarButtonOnClick(cb ActionCallback) TopbarButtonOption

WithTopbarButtonOnClick sets the click callback.

func WithTopbarButtonTitle added in v0.2.0 

func WithTopbarButtonTitle(title string) TopbarButtonOption

WithTopbarButtonTitle sets the tooltip text shown on hover.

type TopbarConfig added in v0.2.0 

type TopbarConfig struct {
	// Brand is the left-side brand lockup (typically a Brand widget).
	Brand Widget
	// Breadcrumb is a slash-separated path string; the last segment is styled as active.
	Breadcrumb string
	// Actions are the right-side controls (TopbarButton, ThemeToggle, etc.).
	Actions []Widget
	// Height overrides the topbar height. Default: NavTheme.TopbarHeight or "56px".
	Height string
	// Background overrides the topbar background color. Default: ColorSurface().
	Background Color
	BaseWidget
}

TopbarConfig configures the Topbar widget.

type Typography 

type Typography struct {
	// Font families
	FontFamily     string
	MonoFontFamily string // monospace font family for code, timestamps, etc.

	// FontSize sets the base font size on the root element (e.g. "13px").
	// When set, rem units scale accordingly throughout the page.
	FontSize string

	// Font sizes for different text styles
	HeadingLarge  string
	HeadingMedium string
	HeadingSmall  string
	BodyLarge     string
	BodyMedium    string
	BodySmall     string

	// Font weights
	FontWeightLight  string
	FontWeightNormal string
	FontWeightMedium string
	FontWeightBold   string

	// Eyebrow label style — uppercase section labels used by the Eyebrow widget.
	EyebrowSize          string // default "11px"
	EyebrowWeight        string // default "600"
	EyebrowLetterSpacing string // default "0.06em"
}

Typography defines font-related theme properties.

type VerticalAlign 

type VerticalAlign string

VerticalAlign represents CSS vertical-align values. 

const (
	// VerticalAlignTop aligns to top
	VerticalAlignTop VerticalAlign = "top"
	// VerticalAlignMiddle aligns to middle
	VerticalAlignMiddle VerticalAlign = "middle"
	// VerticalAlignBottom aligns to bottom
	VerticalAlignBottom VerticalAlign = "bottom"
	// VerticalAlignBaseline aligns to baseline
	VerticalAlignBaseline VerticalAlign = "baseline"
)

type VitalOption added in v0.2.0 

type VitalOption func(*vitalWidget)

VitalOption configures a Vital widget.

func WithVitalStatus added in v0.2.0 

func WithVitalStatus(status string) VitalOption

WithVitalStatus sets the status variant that colors the value text. Valid values: "ok", "warn", "error".

type VitalTheme added in v0.2.0 

type VitalTheme struct {
	// Padding is the vertical padding of each vital row (e.g. "6px 0").
	Padding string
	// LabelFontSize is the font size for the label column (e.g. "12px").
	LabelFontSize string
	// ValueFontSize is the font size for the value column (e.g. "12px").
	ValueFontSize string
	// ValueFontWeight is the font weight for the value column (e.g. "600").
	ValueFontWeight string
}

VitalTheme defines vital row-specific theme properties.

type Widget 

type Widget interface {
	// Render generates a templ.Component for server-side HTML generation.
	// The context can be used for request-scoped data and cancellation.
	Render(ctx context.Context) templ.Component
}

Widget is the core interface that all UI components must implement. It follows Flutter's widget pattern where everything is a widget that can render itself.

func Alert added in v0.2.0 

func Alert(config AlertConfig) Widget

Alert creates a prominent notification panel with a colored left border.

func AppShell added in v0.2.0 

func AppShell(config AppShellConfig) Widget

AppShell creates a full-page application layout with a topbar, sidebar, and main content area. The layout uses CSS Grid: a topbar row at the top, and a sidebar+content row below. It fills 100vh and is designed to be returned from AppConfig.Body.

func Avatar 

func Avatar(config AvatarConfig) Widget

Avatar creates an avatar widget for user profile display.

Avatar follows the configuration struct pattern, allowing complex setup with multiple content types (image, initials, icon), status indicators, and shapes. At least one content type (Image, Initials, or Icon) must be specified.

Example with image: 

gluxui.Avatar(gluxui.AvatarConfig{
    Image: "/users/avatar.jpg",
    Size: gluxui.AvatarSizeMedium,
    Status: &gluxui.AvatarStatus{
        Color: gluxui.ColorSuccess(),
        Position: gluxui.StatusBottomRight,
    },
})

Example with initials: 

gluxui.Avatar(gluxui.AvatarConfig{
    Initials: "JD",
    Size: gluxui.AvatarSizeLarge,
    Shape: gluxui.AvatarShapeCircle,
    Background: gluxui.ColorPrimary(),
})

Example with icon: 

gluxui.Avatar(gluxui.AvatarConfig{
    Icon: gluxui.IconUser,
    Size: gluxui.AvatarSizeMedium,
    Background: gluxui.ColorSecondary(),
})

func AvatarIcon 

func AvatarIcon(iconClass string, size AvatarSize, background Color) Widget

AvatarIcon creates an avatar with an icon.

Example: 

gluxui.AvatarIcon(gluxui.IconUser, gluxui.AvatarSizeMedium, gluxui.ColorSecondary())

func AvatarImage 

func AvatarImage(src string, size AvatarSize) Widget

AvatarImage creates an avatar with an image source.

Example: 

gluxui.AvatarImage("/users/avatar.jpg", gluxui.AvatarSizeMedium)

func AvatarInitials 

func AvatarInitials(initials string, size AvatarSize, background Color) Widget

AvatarInitials creates an avatar with text initials.

Example: 

gluxui.AvatarInitials("JD", gluxui.AvatarSizeLarge, gluxui.ColorPrimary())

func AvatarWithStatus 

func AvatarWithStatus(image string, statusColor Color) Widget

AvatarWithStatus creates an avatar with a status indicator.

Example: 

gluxui.AvatarWithStatus("/users/avatar.jpg", gluxui.ColorSuccess())

func Badge added in v0.2.0 

func Badge(text string, opts ...BadgeOption) Widget

Badge creates a small label chip for status indicators and category tags.

func Brand added in v0.2.0 

func Brand(config BrandConfig) Widget

Brand creates a brand lockup widget for use in the Topbar. The logo is fully customizable — pass any widget as Logo.

func Button 

func Button(text string, options ...ButtonOption) Widget

Button creates a new button widget with the specified text and options. Button uses the functional options pattern where text is the primary parameter and everything else is optional enhancement.

Example: 

// Simple button
gluxui.Button("Click Me")

// Enhanced button with styling and callback
gluxui.Button("Save",
    gluxui.WithButtonVariant(gluxui.ButtonVariantPrimary),
    gluxui.WithButtonSize(gluxui.ButtonSizeLarge),
    gluxui.WithButtonOnClick(func(ctx gluxui.ActionContext) error {
        return saveData()
    }),
)
Example

ExampleButton demonstrates button creation with functional options. 

button := Button("Click Me",
	WithButtonVariant(ButtonVariantPrimary),
	WithButtonSize(ButtonSizeLarge),
)
fmt.Print(renderWidgetToString(button))

Output:
<button type="button" class="glux-btn glux-btn-primary glux-btn-large" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.5rem 1rem; font-size: 1.125rem; border-radius: 0.25rem; background-color: #2563eb; color: #ffffff;">Click Me</button>
Example (Variants)

ExampleButton_variants shows different button styling options. 

primary := Button("Primary", WithButtonVariant(ButtonVariantPrimary))
fmt.Print(renderWidgetToString(primary))

Output:
<button type="button" class="glux-btn glux-btn-primary" style="border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition: all 0.15s ease-in-out; font-weight: 500; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; background-color: #2563eb; color: #ffffff;">Primary</button>

func Card 

func Card(config CardConfig) Widget

Card creates a new card widget with the specified configuration. Card is an elevated surface container that provides visual hierarchy through Material Design elevation shadows.

Example: 

gluxui.Card(gluxui.CardConfig{
    Padding: gluxui.AllEdges(16),
    Elevation: gluxui.CardElevation3,
    Children: []gluxui.Widget{
        gluxui.Heading("Card Title", gluxui.HeadingLevel2),
        gluxui.Text("Card content goes here"),
    },
})

func Checkbox 

func Checkbox(label string, options ...CheckboxOption) Widget

Checkbox creates a new checkbox widget with the specified label and options. Checkbox uses the functional options pattern where label is the primary parameter.

Example: 

// Simple checkbox
gluxui.Checkbox("I accept the terms")

// Enhanced checkbox with callback
gluxui.Checkbox("Subscribe to newsletter",
    gluxui.WithCheckboxChecked(true),
    gluxui.WithCheckboxOnChange(func(ctx gluxui.ActionContext) error {
        return updateSubscription(ctx.GetFormValue("subscribe") == "on")
    }),
)

func CircularAvatar 

func CircularAvatar(image string, size AvatarSize) Widget

CircularAvatar creates a circular avatar (explicit shape specification).

Example: 

gluxui.CircularAvatar("/users/avatar.jpg", gluxui.AvatarSizeLarge)

func CircularImage 

func CircularImage(src string, size string) Widget

CircularImage creates a circular image (useful for avatars or profile pictures).

Example: 

gluxui.CircularImage("/avatar.jpg", "100px")

func Column 

func Column(config ColumnConfig) Widget

Column creates a new column widget that arranges children vertically. Column uses CSS flexbox with flex-direction: column.

Example: 

gluxui.Column(gluxui.ColumnConfig{
    Gap: 16,
    MainAxis: gluxui.AlignmentCenter,
    CrossAxis: gluxui.CrossAlignmentStart,
    Children: []gluxui.Widget{
        gluxui.Text("First item"),
        gluxui.Text("Second item"),
    },
})
Example

ExampleColumn demonstrates vertical layout. 

column := Column(ColumnConfig{
	Gap: 12,
	Children: []Widget{
		Text("First item"),
		Text("Second item"),
	},
})
fmt.Print(renderWidgetToString(column))

Output:
<div class="glux-column" style="display: flex; flex-direction: column; gap: 12px"><span class="glux-text">First item</span><span class="glux-text">Second item</span></div>

func Container 

func Container(config ContainerConfig) Widget

Container creates a new container widget with the specified configuration. Container is a generic layout widget that provides padding, styling, and basic layout control.

Example: 

gluxui.Container(gluxui.ContainerConfig{
    Padding: gluxui.AllEdges(16),
    Background: gluxui.ColorLight,
    Children: []gluxui.Widget{
        gluxui.Text("Hello World"),
    },
})
Example

ExampleContainer demonstrates layout container usage. 

container := Container(ContainerConfig{
	Padding:    AllEdges(16),
	Background: ColorLight(),
	Children: []Widget{
		Text("Container content"),
	},
})
fmt.Print(renderWidgetToString(container))

Output:
<div class="glux-container" style="padding: 16px 16px 16px 16px; background: #f8f9fa"><span class="glux-text">Container content</span></div>

func DangerButton 

func DangerButton(text string, onClick ActionCallback) Widget

DangerButton creates a danger button with the specified text and callback.

func DisabledButton 

func DisabledButton(text string) Widget

DisabledButton creates a disabled button with the specified text.

func Divider added in v0.2.0 

func Divider(opts ...DividerOption) Widget

Divider creates a horizontal rule for separating content sections.

func Drawer added in v0.2.0 

func Drawer(config DrawerConfig) Widget

Drawer creates a side panel that slides in from the right. When Open is false, the drawer occupies 0 width; CSS transition handles the animation. Use OnClose with a callback that returns an ActionResult swapping this widget with Open=false.

func DrawerSection added in v0.2.0 

func DrawerSection(config DrawerSectionConfig) Widget

DrawerSection creates a labeled content section inside a Drawer.

func Eyebrow added in v0.2.0 

func Eyebrow(text string, opts ...EyebrowOption) Widget

Eyebrow creates a small uppercase label using the theme's eyebrow typography settings.

func Form added in v0.2.0 

func Form(config FormConfig) Widget

Form wraps children in an HTML form element. When submitted, HTMX posts all named inputs inside the form to OnSubmit in a single request. Use Button with WithButtonType(ButtonTypeSubmit) to add a submit button. Pressing Enter in any text field also submits the form.

func Heading 

func Heading(content string, level HeadingLevel) Widget

Heading creates a semantic heading widget (h1-h6). This widget uses the direct parameters pattern with content and level parameters.

Example: 

gluxui.Heading("Page Title", gluxui.HeadingLevel1)     // Creates <h1>
gluxui.Heading("Section Title", gluxui.HeadingLevel2)  // Creates <h2>
gluxui.Heading("Subsection", gluxui.HeadingLevel3)     // Creates <h3>
Example

ExampleHeading demonstrates semantic heading creation. 

h1 := Heading("Main Title", HeadingLevel1)
fmt.Print(renderWidgetToString(h1))

Output:
<h1 class="glux-heading glux-heading-1" style="margin: 0; font-size: 2.5rem; font-weight: 600; line-height: 1.2;">Main Title</h1>

func HeadingWithClass 

func HeadingWithClass(content string, level HeadingLevel, className string) Widget

HeadingWithClass creates a heading widget with custom CSS classes. This is a convenience function for common styling patterns.

func HeadingWithStyle 

func HeadingWithStyle(content string, level HeadingLevel, style *Style) Widget

HeadingWithStyle creates a heading widget with custom styling. This is a convenience function for common styling patterns.

func Icon 

func Icon(iconClass string, opts ...IconOption) Widget

Icon creates an icon widget using Font Awesome classes for display purposes.

Icon widgets follow the direct parameters pattern, using the iconClass parameter as the primary input and functional options for progressive enhancement. They are theme-aware, automatically adapting colors to the current light/dark theme.

The iconClass parameter accepts:

  • Font Awesome class strings: "fas fa-home", "fab fa-github"
  • Type-safe icon constants: IconHome, IconUser, IconSettings

All icons use semantic color functions by default, which automatically adapt to the current theme. Size variants range from IconSizeSmall (14px) to IconSize3X (48px).

Example basic usage: 

gluxui.Icon("fas fa-home")
gluxui.Icon(gluxui.IconHome)
gluxui.Icon(gluxui.IconUser, gluxui.WithIconSize(gluxui.IconSizeLarge))

Example with full customization: 

gluxui.Icon(gluxui.IconSettings,
    gluxui.WithIconSize(gluxui.IconSizeXLarge),
    gluxui.WithIconColor(gluxui.ColorPrimary()),
    gluxui.WithIconID("settings-icon"),
)

Example theme-aware usage: 

// Color automatically adapts to current theme (light/dark)
gluxui.Icon(gluxui.IconHeart, gluxui.WithIconColor(gluxui.ColorDanger()))
gluxui.Icon(gluxui.IconStar, gluxui.WithIconColor(gluxui.ColorWarning()))
Example

ExampleIcon demonstrates basic icon usage with Font Awesome. 

icon := Icon(IconHome)
fmt.Print(renderWidgetToString(icon))

Output:
<i class="fas fa-home glux-icon glux-icon-medium" style="font-size: 1rem; color: #1e293b;"></i>
Example (WithColor)

ExampleIcon_withColor demonstrates theme-aware icon colors. 

primaryIcon := Icon(IconStar, WithIconColor(ColorPrimary()))
fmt.Print(renderWidgetToString(primaryIcon))

Output:
<i class="fas fa-star glux-icon glux-icon-medium" style="font-size: 1rem; color: #2563eb;"></i>
Example (WithSize)

ExampleIcon_withSize shows icon size variants. 

largeIcon := Icon(IconSettings, WithIconSize(IconSizeLarge))
fmt.Print(renderWidgetToString(largeIcon))

Output:
<i class="fas fa-cog glux-icon glux-icon-large" style="font-size: 1.5rem; color: #1e293b;"></i>
Example (WithStyle)

ExampleIcon_withStyle shows Font Awesome style variants using constants. 

regularIcon := Icon("far fa-heart") // Use regular heart icon
fmt.Print(renderWidgetToString(regularIcon))

Output:
<i class="far fa-heart glux-icon glux-icon-medium" style="font-size: 1rem; color: #1e293b;"></i>

func IconButton 

func IconButton(iconClass string, opts ...IconOption) Widget

IconButton creates an icon styled for use inside buttons or clickable areas. This is a convenience function that combines Icon() with button-appropriate styling.

The icon is automatically styled with the glux-icon-button class, which provides proper spacing and appearance when used within interactive elements.

Example: 

gluxui.IconButton(gluxui.IconDownload, gluxui.WithIconSize(gluxui.IconSizeLarge))
Example

ExampleIconButton shows the helper function for creating icon buttons. 

// Enable testing mode for predictable action IDs
SetTestingMode(true)
defer SetTestingMode(false)

// IconButton creates just an icon with button-specific styling, not a button
iconButton := IconButton(IconEdit, WithIconColor(ColorPrimary()))
fmt.Print(renderWidgetToString(iconButton))

Output:
<i class="fas fa-edit glux-icon glux-icon-medium glux-icon-button" style="font-size: 1rem; color: #2563eb;"></i>

func IconWithColor 

func IconWithColor(iconClass string, color Color) Widget

IconWithColor creates an icon widget with a specific theme-aware color. This is a convenience function combining Icon() with WithIconColor().

The color automatically adapts to the current theme.

Example: 

gluxui.IconWithColor(gluxui.IconHeart, gluxui.ColorDanger())
gluxui.IconWithColor(gluxui.IconStar, gluxui.ColorWarning())
Example

ExampleIconWithColor shows the helper function for colored icons. 

successIcon := IconWithColor(IconCheck, ColorSuccess())
fmt.Print(renderWidgetToString(successIcon))

Output:
<i class="fas fa-check glux-icon glux-icon-medium" style="font-size: 1rem; color: #16a34a;"></i>

func IconWithSize 

func IconWithSize(iconClass string, size IconSize) Widget

IconWithSize creates an icon widget with a specific size. This is a convenience function combining Icon() with WithIconSize().

Example: 

gluxui.IconWithSize(gluxui.IconUser, gluxui.IconSizeLarge)
gluxui.IconWithSize(gluxui.IconSettings, gluxui.IconSize2X)
Example

ExampleIconWithSize demonstrates the helper function for sized icons. 

smallIcon := IconWithSize(IconUser, IconSizeSmall)
fmt.Print(renderWidgetToString(smallIcon))

Output:
<i class="fas fa-user glux-icon glux-icon-small" style="font-size: 0.875rem; color: #1e293b;"></i>

func IconWithStyle 

func IconWithStyle(iconClass string, style *Style) Widget

IconWithStyle creates an icon widget with custom styling. This is a convenience function combining Icon() with WithIconStyle().

Example: 

style := &gluxui.Style{
    Margin: gluxui.VerticalEdges(4),
}
gluxui.IconWithStyle(gluxui.IconUser, style)
Example

ExampleIconWithStyle demonstrates the helper function for icons with styles. 

brandIcon := IconWithStyle(IconGithub, &Style{}) // Pass empty style
fmt.Print(renderWidgetToString(brandIcon))

Output:
<i class="fab fa-github glux-icon glux-icon-medium" style="font-size: 1rem; color: #1e293b;"></i>

func Image 

func Image(src string, opts ...ImageOption) Widget

Image creates an image widget for displaying images with responsive and lazy loading support.

Image widgets follow the direct parameters pattern, using the src parameter as the primary input and functional options for progressive enhancement. They support responsive images via srcset, lazy loading for performance, and various object-fit modes for container adaptation.

The src parameter accepts any valid image URL (relative or absolute paths).

Example basic usage: 

gluxui.Image("/images/photo.jpg")
gluxui.Image("https://example.com/image.png",
    gluxui.WithImageAlt("Product photo"),
    gluxui.WithImageSize("300px", "200px"),
)

Example with responsive images: 

gluxui.Image("/images/hero.jpg",
    gluxui.WithImageAlt("Hero banner"),
    gluxui.WithImageSrcSet("hero-320w.jpg 320w, hero-640w.jpg 640w, hero-1024w.jpg 1024w"),
    gluxui.WithImageSizes("(max-width: 600px) 100vw, 50vw"),
    gluxui.WithImageLazy(true),
)

Example with object-fit: 

gluxui.Image("/images/profile.jpg",
    gluxui.WithImageSize("200px", "200px"),
    gluxui.WithImageObjectFit(gluxui.ImageObjectFitCover),
    gluxui.WithImageBorderRadius("50%"),
)

func ImageWithSize 

func ImageWithSize(src string, width, height string) Widget

ImageWithSize creates an image with specific width and height dimensions.

Example: 

gluxui.ImageWithSize("/photo.jpg", "400px", "300px")

func LargeButton 

func LargeButton(text string, onClick ActionCallback) Widget

LargeButton creates a large button with the specified text and callback.

func LazyImage 

func LazyImage(src string, alt string) Widget

LazyImage creates an image with lazy loading enabled and alt text.

Example: 

gluxui.LazyImage("/large-photo.jpg", "High resolution photo")

func LinkButton 

func LinkButton(text string, onClick ActionCallback) Widget

LinkButton creates a link-style button with the specified text and callback.

func List added in v0.2.0 

func List(config ListConfig) Widget

List creates a vertical list container for ListItem widgets.

func ListItem added in v0.2.0 

func ListItem(config ListItemConfig) Widget

ListItem creates a row for use inside a List. 

func Modal(config ModalConfig) Widget

Modal creates a new modal dialog widget 

func NavigationBar(config NavigationBarConfig) Widget

NavigationBar creates a horizontal navigation bar component with automatic content management. It provides persistent navigation for mobile/app-style applications with automatic routing, content swapping, active state highlighting, and theme integration.

The NavigationBar automatically manages routing and content display. Each NavigationDestination must provide a Content widget that will be displayed when that destination is selected. The bar generates internal routes automatically and handles content swapping via HTMX.

Example basic usage: 

bar := gluxui.NavigationBar(gluxui.NavigationBarConfig{
    Destinations: []gluxui.NavigationDestination{
        {Icon: gluxui.Icon(gluxui.IconHome), Label: "Home", Content: homePage()},
        {Icon: gluxui.Icon(gluxui.IconSearch), Label: "Search", Content: searchPage()},
    },
})

Example with top positioning: 

bar := gluxui.NavigationBar(gluxui.NavigationBarConfig{
    Type: gluxui.NavigationBarTypeTop,
    Destinations: []gluxui.NavigationDestination{
        {Icon: gluxui.Icon(gluxui.IconDashboard), Label: "Dashboard", Content: dashboardPage()},
        {Icon: gluxui.Icon(gluxui.IconUsers), Label: "Users", Content: usersPage()},
    },
    Height: "64px",
})

func NavigationRail(config NavigationRailConfig) Widget

NavigationRail creates a vertical sidebar navigation component with automatic content management. It provides persistent navigation for desktop applications with automatic routing, content swapping, active state highlighting, optional header/footer sections, and theme integration.

The NavigationRail automatically manages routing and content display. Each NavigationItem must provide a Content widget that will be displayed when that item is selected. The rail generates internal routes automatically and handles content swapping via HTMX.

Example basic usage: 

rail := gluxui.NavigationRail(gluxui.NavigationRailConfig{
    Items: []gluxui.NavigationItem{
        {Label: "Home", Icon: gluxui.IconHome, Content: homePage()},
        {Label: "Settings", Icon: gluxui.IconSettings, Content: settingsPage()},
    },
})

Example with header and footer: 

rail := gluxui.NavigationRail(gluxui.NavigationRailConfig{
    Items: []gluxui.NavigationItem{
        {Label: "Dashboard", Icon: gluxui.IconHome, Content: dashboardPage()},
        {Label: "Users", Icon: gluxui.IconUsers, Content: usersPage()},
    },
    Header: gluxui.Heading("My App", gluxui.HeadingLevel2),
    Footer: gluxui.Column(gluxui.ColumnConfig{
        Children: []gluxui.Widget{
            gluxui.Button("Light", gluxui.WithButtonOnClick(switchToLight)),
            gluxui.Button("Dark", gluxui.WithButtonOnClick(switchToDark)),
        },
    }),
})

func PageHeader(config PageHeaderConfig) Widget

PageHeader creates a page-level heading with optional eyebrow label and right-side actions.

func Panel 

func Panel(config PanelConfig) Widget

Panel creates a structured container widget with distinct Header, Content, and optional Footer sections. Provides clear visual organization for complex content with theme-aware section backgrounds.

Example: 

gluxui.Panel(gluxui.PanelConfig{
    Header: gluxui.Heading("User Settings", gluxui.HeadingLevel2),
    Content: []gluxui.Widget{
        gluxui.TextField("Email"),
        gluxui.Checkbox("notifications"),
    },
    Footer: []gluxui.Widget{
        gluxui.Button("Save", gluxui.WithButtonVariant(gluxui.ButtonVariantPrimary)),
    },
})

func PrimaryButton 

func PrimaryButton(text string, onClick ActionCallback) Widget

PrimaryButton creates a primary button with the specified text and callback.

func Progress added in v0.2.0 

func Progress(config ProgressConfig) Widget

Progress creates a slim horizontal progress bar.

func Radio added in v0.2.0 

func Radio(label string, opts ...RadioOption) Widget

Radio creates a single radio button with a label.

func RadioGroup added in v0.2.0 

func RadioGroup(config RadioGroupConfig) Widget

RadioGroup wraps multiple Radio widgets, ensuring they share the same HTML name.

func ResponsiveImage 

func ResponsiveImage(src string, srcset string, sizes string) Widget

ResponsiveImage creates an image with srcset and sizes for responsive display.

Example: 

gluxui.ResponsiveImage("/hero.jpg",
    "hero-320w.jpg 320w, hero-640w.jpg 640w",
    "(max-width: 600px) 100vw, 50vw",
)

func Row 

func Row(config RowConfig) Widget

Row creates a new row widget that arranges children horizontally. Row uses CSS flexbox with flex-direction: row.

Example: 

gluxui.Row(gluxui.RowConfig{
    Gap: 8,
    MainAxis: gluxui.AlignmentSpaceBetween,
    CrossAxis: gluxui.CrossAlignmentCenter,
    Children: []gluxui.Widget{
        gluxui.Text("Left"),
        gluxui.Text("Right"),
    },
})
Example

ExampleRow demonstrates horizontal layout. 

row := Row(RowConfig{
	Gap:      8,
	MainAxis: AlignmentSpaceBetween,
	Children: []Widget{
		Text("Left"),
		Text("Right"),
	},
})
fmt.Print(renderWidgetToString(row))

Output:
<div class="glux-row" style="display: flex; flex-direction: row; gap: 8px; justify-content: space-between"><span class="glux-text">Left</span><span class="glux-text">Right</span></div>

func SVGImage added in v0.2.0 

func SVGImage(markup string, opts ...SVGImageOption) Widget

SVGImage creates a widget that renders inline SVG markup. markup must be a complete, valid <svg> element supplied by trusted application code. Use WithSVGSize to constrain the rendered dimensions.

func SecondaryButton 

func SecondaryButton(text string, onClick ActionCallback) Widget

SecondaryButton creates a secondary button with the specified text and callback.

func SegItem added in v0.2.0 

func SegItem(value, label string) Widget

SegItem creates an option inside a Segmented control.

func Segmented added in v0.2.0 

func Segmented(config SegmentedConfig) Widget

Segmented creates a compact inline button group.

func Select 

func Select(options []Option, selectOptions ...SelectOption) Widget

Select creates a new select widget with the specified options and configuration. Select uses the functional options pattern where options list is the primary parameter.

Example: 

// Simple select
gluxui.Select([]gluxui.Option{
    {Value: "us", Label: "United States"},
    {Value: "ca", Label: "Canada"},
})

// Enhanced select with callback
gluxui.Select(countries,
    gluxui.WithSelectSelected("us"),
    gluxui.WithSelectPlaceholder("Choose country"),
    gluxui.WithSelectOnChange(func(ctx gluxui.ActionContext) error {
        return updateShipping(ctx.GetFormValue("country"))
    }),
)

func Sidebar(config SidebarConfig) Widget

Sidebar creates a vertical navigation sidebar supporting sections, dividers, nav items, and a footer. It is an alternative to NavigationRail for dark-surface shell layouts.

func SidebarDivider added in v0.2.0 

func SidebarDivider() Widget

SidebarDivider creates a horizontal separator inside a Sidebar.

func SidebarFooter added in v0.2.0 

func SidebarFooter(children ...Widget) Widget

SidebarFooter creates a pinned footer zone at the bottom of a Sidebar.

func SidebarNavItem added in v0.2.0 

func SidebarNavItem(config SidebarNavItemConfig) Widget

SidebarNavItem creates a navigation item for use inside a Sidebar.

func SidebarSection added in v0.2.0 

func SidebarSection(label string) Widget

SidebarSection creates a labeled section header inside a Sidebar.

func SmallButton 

func SmallButton(text string, onClick ActionCallback) Widget

SmallButton creates a small button with the specified text and callback.

func SquareAvatar 

func SquareAvatar(image string, size AvatarSize) Widget

SquareAvatar creates a square avatar with rounded corners.

Example: 

gluxui.SquareAvatar("/users/avatar.jpg", gluxui.AvatarSizeLarge)

func Stat added in v0.2.0 

func Stat(config StatConfig) Widget

Stat creates a large metric display widget typically used in hero areas or dashboards.

func StatChip added in v0.2.0 

func StatChip(config StatChipConfig) Widget

StatChip creates a standalone metric chip for use inside StatsStrip.

func StatsStrip added in v0.2.0 

func StatsStrip(config StatsStripConfig) Widget

StatsStrip creates a horizontal strip of metric chips separated by a top border.

func Table added in v0.2.0 

func Table(config TableConfig) Widget

Table creates a themed data table with optional row status highlights.

func Text 

func Text(content string) Widget

Text creates a simple text widget for displaying text content. This widget uses the direct parameters pattern for minimal boilerplate.

Example: 

gluxui.Text("Hello, World!")
gluxui.Text("Welcome to GluxUI")
Example

ExampleText demonstrates basic text widget usage. 

text := Text("Hello, GluxUI!")
fmt.Print(renderWidgetToString(text))

Output:
<span class="glux-text">Hello, GluxUI!</span>
Example (WithStyling)

ExampleText_withStyling shows how to apply custom styling to text. 

text := TextWithStyle("Styled Text", &Style{
	Background: ColorPrimary(),
	Padding:    AllEdges(8),
})
fmt.Print(renderWidgetToString(text))

Output:
<span class="glux-text" style="background: #2563eb; padding: 8px 8px 8px 8px;">Styled Text</span>

func TextField 

func TextField(label string, options ...TextFieldOption) Widget

TextField creates a new text field widget with the specified label and options. TextField uses the functional options pattern where label is the primary parameter and everything else is optional enhancement.

Example: 

// Simple text field
gluxui.TextField("Email Address")

// Enhanced text field with validation and callback
gluxui.TextField("Email Address",
    gluxui.WithTextFieldPlaceholder("user@example.com"),
    gluxui.WithTextFieldType(gluxui.InputTypeEmail),
    gluxui.WithTextFieldRequired(true),
    gluxui.WithTextFieldOnChange(func(ctx gluxui.ActionContext) error {
        return validateEmail(ctx.GetFormValue("email"))
    }),
)

func TextWithClass 

func TextWithClass(content string, className string) Widget

TextWithClass creates a text widget with custom CSS classes. This is a convenience function for common styling patterns.

func TextWithStyle 

func TextWithStyle(content string, style *Style) Widget

TextWithStyle creates a text widget with custom styling. This is a convenience function for common styling patterns.

func ThemeToggle added in v0.2.0 

func ThemeToggle() Widget

ThemeToggle creates a pill button showing the current mode ("Dark" / "Light") that toggles between light and dark mode within the active theme family.

func ToggleButton added in v0.2.0 

func ToggleButton(value, label string) Widget

ToggleButton creates a button for use inside a ToggleGroup. Set Active=true on the currently selected button.

func ToggleGroup added in v0.2.0 

func ToggleGroup(config ToggleGroupConfig) Widget

ToggleGroup creates a tab-bar style button group where one option is active at a time.

func Topbar added in v0.2.0 

func Topbar(config TopbarConfig) Widget

Topbar creates a horizontal application header bar. It holds a brand slot on the left, optional breadcrumb in the center, and action buttons on the right.

func TopbarButton added in v0.2.0 

func TopbarButton(icon Widget, opts ...TopbarButtonOption) Widget

TopbarButton creates a compact icon-only button sized for the Topbar actions slot. When badge is non-empty, a small notification dot is shown in the top-right corner.

func Vital added in v0.2.0 

func Vital(label, value string, opts ...VitalOption) Widget

Vital creates a label+value display row with an optional status color on the value. Used to show a key metric or property in a compact horizontal layout.

Source Files

View all Source files

Directories

Path Synopsis
examples
catalog command
catalog/pages
catalog/widgets
Package widgets provides custom widgets for the catalog application.
 Package widgets provides custom widgets for the catalog application.
clicker command
form command
Package main demonstrates a simple contact form using GluxUI.
 Package main demonstrates a simple contact form using GluxUI.
navigation command
Package main demonstrates NavigationRail with content-first navigation.
 Package main demonstrates NavigationRail with content-first navigation.
navigationbar command

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.