{"id":27446973,"url":"https://github.com/goinfinite/ui","last_synced_at":"2025-10-27T02:05:00.371Z","repository":{"id":287039301,"uuid":"962801979","full_name":"goinfinite/ui","owner":"goinfinite","description":"Reusable components for Go with templ, Alpine.js and Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-04-12T13:10:04.000Z","size":31,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T05:59:52.299Z","etag":null,"topics":["alpinejs","components","go","tailwindcss","templ","ui"],"latest_commit_sha":null,"homepage":"","language":"templ","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/goinfinite.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-08T17:38:07.000Z","updated_at":"2025-04-12T13:10:07.000Z","dependencies_parsed_at":"2025-04-09T17:47:14.943Z","dependency_job_id":null,"html_url":"https://github.com/goinfinite/ui","commit_stats":null,"previous_names":["goinfinite/ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goinfinite%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goinfinite%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goinfinite%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goinfinite%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goinfinite","download_url":"https://codeload.github.com/goinfinite/ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016625,"owners_count":21198832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","components","go","tailwindcss","templ","ui"],"created_at":"2025-04-15T05:59:54.597Z","updated_at":"2025-10-27T02:05:00.357Z","avatar_url":"https://github.com/goinfinite.png","language":"templ","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Infinite UI](https://github.com/goinfinite/ui) \u0026middot; [![Demo](https://img.shields.io/badge/demo-233876)](https://ui.demo.goinfinite.net/) [![/r/goinfinite](https://img.shields.io/badge/%2Fr%2Fgoinfinite-FF4500?logo=reddit\u0026logoColor=ffffff)](https://www.reddit.com/r/goinfinite/) [![Discussions](https://img.shields.io/badge/discussions-751A3D?logo=github)](https://github.com/orgs/goinfinite/discussions) [![Report Card](https://img.shields.io/badge/report-A%2B-brightgreen)](https://goreportcard.com/report/github.com/goinfinite/ui) [![License](https://img.shields.io/badge/license-MIT-teal.svg)](https://github.com/goinfinite/ui/blob/main/LICENSE.md)\n\nInfinite UI is a collection of reusable components for building elegant user interfaces in Go with [a-h/templ](https://github.com/a-h/templ), [Alpine.js](https://github.com/alpinejs/alpine), [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss), [Phosphor Icons](https://phosphoricons.com/) and the occasional additional JavaScript libraries when necessary.\n\nThe 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.\n\n## Features\n\n- **Reusable Components**: A set of pre-built components that can be easily integrated into your projects.\n- **Responsive Design**: Components are designed to be responsive and work well on various screen sizes.\n- **Lightweight**: Built with performance in mind, ensuring fast load times and smooth interactions.\n- **HTMX Ready**: Although not required, Infinite UI is designed to work well with HTMX.\n\n## Installation\n\nTo use Infinite UI in your project, you can install it using Go modules. Run the following command in your terminal:\n\n```bash\ngo get github.com/goinfinite/ui@latest\n```\n\nAfter installing Infinite UI, make sure your `\u003chead\u003e` component is including [Alpine.js](https://alpinejs.dev/essentials/installation), [Tailwind CSS](https://unocss.dev/integrations/runtime) and [Phosphor Icons](https://github.com/phosphor-icons/homepage?tab=readme-ov-file#vanilla-web).\n\nOne 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](https://fonts.google.com/) and [HTMX](https://htmx.org/).\n\nIf you haven't yet installed the template engine `a-h/templ`, you can do so by running the following command:\n\n```bash\ngo get github.com/a-h/templ\n```\n\n## Usage\n\nInfinite UI components are designed with a consistent interface pattern. Each component accepts a settings struct that contains all configuration options.\n\nThe 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.\n\nComponent settings may accept constant values from predefined types or simple string values depending on the component's requirements.\n\n### Usage Example\n\n```go\n@uiForm.InputField(uiForm.InputFieldSettings{\n    InputType:  uiForm.InputTypeText,\n    InputName:  \"name\",\n    Label:      \"Name\",\n    IsRequired: true,\n})\n```\n\n### Styling\n\nInfinite 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.\n\nFor hover and other states, please configure your Tailwind CSS with custom `primary` and `secondary` color schemes:\n\n- Follow the [Tailwind CSS color customization guide](https://tailwindcss.com/docs/colors#customizing-your-colors);\n- If you're using alternative atomic CSS engines like UnoCSS, please refer to their specific configuration documentation.\n\n### Alpine.js States\n\nComponents leverage Alpine.js for state management by offering:\n\n- `TwoWayStatePath`: Path for bidirectional data binding using `x-model` directive;\n- `OneWayStatePath`: Path for read-only data binding using `x-bind` directive;\n\nThese 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.\n\nFor example, `x-data=\"{ name: 'John' }\"` would use `OneWayStatePath: \"name\"` or `TwoWayStatePath: \"name\"`.\n\n- For nested objects, use dot notation: `x-data=\"{ user: { name: 'John' } }\"` would use `OneWayStatePath: \"user.name\"` or `TwoWayStatePath: \"user.name\"`;\n- For arrays, use bracket notation: `x-data=\"{ users: ['John', 'Jane'] }\"` would use `OneWayStatePath: \"users[0]\"` or `TwoWayStatePath: \"users[0]\"`;\n\n### Function Calling\n\nComponents 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`.\n\nTwo patterns are available for function invocation, depending on component requirements:\n\n1. **`Func` suffix fields** (e.g., `OnClickFunc`, `OnChangeFunc`):\n\n- Functions must include parameters or empty parentheses;\n- Example: `OnClickFunc: \"myFunction('Hello World!')\"` or `OnClickFunc: \"myFunction()\"`;\n- Suitable when you need to specify exact parameters during event triggers.\n\n2. **`FuncName` suffix fields** (e.g., `OnClickFuncName`, `OnChangeFuncName`):\n\n- Specify only the function name without parameters;\n- Example: `OnClickFuncName: \"myFunction\"`;\n- The component will automatically pass appropriate parameters;\n- Refer to component documentation for parameter requirements.\n\nThe `On` prefix (e.g., `OnClick`, `OnChange`) indicates event-driven execution, though function calling is not limited to events in all components.\n\n### HTMX Ready\n\nInfinite 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.\n\nForm 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.\n\n### JavaScript Toolset\n\nThe `toolset.js` file is a collection of JavaScript utility functions that can be used in your project. It is included in the `@uiImport.HeadTagsFullJs()` component or you can include it manually using `@uiImport.ToolsetJs()`.\n\nTo use the toolset, you can access it through the `UiToolset` object or `window.UiToolset` object.\n\n- `UiToolset.CreateRandomPassword()`: Creates a random password of length 16 characters.\n- `UiToolset.ToggleLoadingOverlay()`: Toggles the loading overlay element with the id `loading-overlay`.\n- `UiToolset.JsonAjax()`: Makes a JSON AJAX request to the specified URL.¹\n- `UiToolset.RegisterAlpineState()`: Registers a function to be called when Alpine.js is initialized or when it is already initialized. Useful for avoiding registering repeated addEventListeners for the same method, like when transiting through pages.\n\n_¹Available when Alpine.js was already initialized._\n\n### Go(lang) Toolset\n\nBesides the JavaScript toolset, Infinite UI also provides a Go(lang) toolset to address common UI related tasks.\n\n#### Minifier\n\nBased on [esbuild](https://github.com/evanw/esbuild), the minifier is a tool to minify JavaScript and CSS content. Use the MinifierSettings struct if the defaults are breaking your code.\n\n- `Minifier(MinifierSettings)`: Minifies JavaScript and CSS content.\n- `MinifierJs(unminifiedContent)`: Minifier but takes a string as input and returns a string.\n- `MinifierCss(unminifiedContent)`: MinifierJs but for CSS content.\n- `MinifierTemplate(MinifierSettings)`: Minifier but returns a templ.Component instead of a string.\n- `MinifierJsTemplate(unminifiedContent)`: MinifierJs but returns a templ.Component.\n- `MinifierCssTemplate(unminifiedContent)`: MinifierCss but returns a templ.Component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoinfinite%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoinfinite%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoinfinite%2Fui/lists"}