Infinite UI ·

Infinite UI is a collection of reusable components for building elegant user interfaces in Go with a-h/templ, Alpine.js, Tailwind CSS via UnoCSS, and Phosphor Icons. It standardizes the common cases and leaves the custom cases open.

Tip

Working with an AI agent? Point it to SKILL.md before it writes code that imports Infinite UI. The skill routes the agent to the right package and its README.

Important

Human Reviewed: AI models assist development, but senior developers review every line for coherence, readability, and maintainability.

Installation

Infinite UI requires Go 1.27.1 or later. Install it with:

go get github.com/goinfinite/ui@latest

Your <head> must load Alpine.js, a Tailwind-compatible CSS engine, and Phosphor Icons. Use @uiImport.HeadTagsMinimal() or @uiImport.HeadTagsFull(); the full variant adds Google Fonts, HTMX, and the JavaScript toolset. Granular variants exist for each subset.

Put the custom primary and secondary colors in the window.__unocss theme config on the page, in a plain <script> before the head tags. A tailwind.config.js file has no effect on the UnoCSS runtime.

If you have not installed the template engine yet:

go get github.com/a-h/templ

See CHANGELOG.md for release history.

Usage

Every component accepts one settings struct. Required fields come first, then a comment line, then the optional fields. This avoids pointers, which templ does not support well.

@uiForm.InputField(uiForm.InputFieldSettings{
    InputType:  uiForm.InputTypeText,
    InputName:  "name",
    Label:      "Name",
    IsRequired: true,
})

Components connect to Alpine.js state through their *StatePath fields:

• A TwoWayStatePath field binds with x-model.
• A OneWayStatePath field binds with x-bind.

The path names a property in the nearest x-data object. Use dot notation for nested objects and bracket notation for arrays.

Components run functions on events through their On*Func fields. The value is a full call, for example OnClickFunc: "myFunction('Hello World!')" or OnClickFunc: "myFunction()". The function can live in the parent x-data object, on window, or on document.

Components use a neutral color palette with reduced opacity values, for example bg-neutral-50/10. This keeps them compatible with any design system that provides primary and secondary colors.

HTMX is optional. Components work without it; the data table falls back to fetch.

Packages

Each package has its own README with the component list and usage snippets:

• Form — text, choice, and switch inputs.
• Control — buttons and sliders.
• Display — alerts, confirmation dialogs, modals, header blocks, tags, toasts, and page chrome.
• Structural — the card, page headings, server-driven data table, filter bar, pagination, and sidebar.
• Toolset — the JavaScript UiToolset and the Go minifier.