Infinite UI is a collection of reusable components for building elegant user interfaces in Go with a-h/templ, Alpine.js, Tailwind CSS, Phosphor Icons and the occasional additional JavaScript libraries when necessary.
The library is engineered for developer efficiency and ease of implementation, offering a balance between standardization and customization to accelerate development workflows while maintaining high-quality, responsive interfaces.
- Reusable Components: A set of pre-built components that can be easily integrated into your projects.
- Responsive Design: Components are designed to be responsive and work well on various screen sizes.
- Lightweight: Built with performance in mind, ensuring fast load times and smooth interactions.
- HTMX Ready: Although not required, Infinite UI is designed to work well with HTMX.
To use Infinite UI in your project, you can install it using Go modules. Run the following command in your terminal:
go get github.com/goinfinite/uiAfter installing Infinite UI, make sure your <head> component is including Alpine.js, Tailwind CSS and Phosphor Icons.
One way to install the necessary scripts and styles is to use the @uiImport.HeadTagsMinimal() or @uiImport.HeadTagsFull() components. The only difference between the two is that HeadTagsFull() also includes Google Fonts and HTMX.
If you haven't yet installed the template engine a-h/templ, you can do so by running the following command:
go get github.com/a-h/templInfinite UI components are designed with a consistent interface pattern. Each component accepts a settings struct that contains all configuration options.
The settings structs are organized with required fields at the top, followed by optional fields (separated by a comment line). This approach eliminates the need for pointers, which aren't well-supported in templ.
Component settings may accept constant values from predefined types or simple string values depending on the component's requirements.
@uiForm.InputField(uiForm.InputFieldSettings{
InputType: uiForm.InputTypeText,
InputName: "name",
Label: "Name",
IsRequired: true,
})Infinite UI components are designed with a neutral color palette using reduced opacity values (e.g., bg-neutral-50/10). This approach ensures compatibility across various design systems.
For hover and other states, please configure your Tailwind CSS with custom primary and secondary color schemes:
- Follow the Tailwind CSS color customization guide;
- If you're using alternative atomic CSS engines like UnoCSS, please refer to their specific configuration documentation.
Components leverage Alpine.js for state management by offering:
TwoWayStatePath: Path for bidirectional data binding usingx-modeldirective;OneWayStatePath: Path for read-only data binding usingx-binddirective;
These common settings struct fields allow you to connect component states to your application's data model seamlessly. The path is a string representing the x-data object property to bind to.
For example, x-data="{ name: 'John' }" would use OneWayStatePath: "name" or TwoWayStatePath: "name".
- For nested objects, use dot notation:
x-data="{ user: { name: 'John' } }"would useOneWayStatePath: "user.name"orTwoWayStatePath: "user.name"; - For arrays, use bracket notation:
x-data="{ users: ['John', 'Jane'] }"would useOneWayStatePath: "users[0]"orTwoWayStatePath: "users[0]";
Components can execute functions when specific events occur. These functions can be defined within the parent component's x-data object or broader scopes like window or document.
Two patterns are available for function invocation, depending on component requirements:
Funcsuffix fields (e.g.,OnClickFunc,OnChangeFunc):
- Functions must include parameters or empty parentheses;
- Example:
OnClickFunc: "myFunction('Hello World!')"orOnClickFunc: "myFunction()"; - Suitable when you need to specify exact parameters during event triggers.
FuncNamesuffix fields (e.g.,OnClickFuncName,OnChangeFuncName):
- Specify only the function name without parameters;
- Example:
OnClickFuncName: "myFunction"; - The component will automatically pass appropriate parameters;
- Refer to component documentation for parameter requirements.
The On prefix (e.g., OnClick, OnChange) indicates event-driven execution, though function calling is not limited to events in all components.
Infinite UI does not require HTMX to function, but it is designed to work well with it. HTMX is a JavaScript library that allows you to make AJAX requests and update parts of your page without reloading the entire page.
Form submissions done with HTMX usually utilize the FormData object to send form data to the server. Infinite UI allows you to set the InputName field to specify the keys of the FormData object. There is also InputId but id attributes are not required for form submissions, it's for locating the element in the DOM if necessary.