Introduction

Accessible, Vanilla UI Components for Go Web Apps

hansui provides a collection of pure, vanilla UI components designed specifically for Go web applications. The components are built using only HTML - with templ - CSS, and JavaScript. Zero dependencies, no external frameworks or complex setup.

Motivations

Really, no motivations at all 😄. But seriously, Hansui emerged from a desire to rediscover the beauty in simplicity, focusing on the basics of web development.

While today's trends lean towards TailwindCSS, HTMX, AlpineJS, and similar libraries — which I appreciate and use — Hansui was born as a personal attempt to bring back something old yet new at the same time. It aims to embrace simplicity, offering a fresh take on timeless web fundamentals.

Even though Hansui's components are built to be framework-agnostic, leveraging core web principles, they also provide the flexibility to integrate seamlessly into a project stack that includes TailwindCSS, HTMX, and/or AlpineJS. This means you can enjoy the simplicity of Hansui while still taking advantage of the power and versatility of modern libraries.

This lightweight approach ensures that the components are easy to integrate, understand, and customize without any overhead or dependency bloat.

Why that name?

When the idea of building a component library using nothing more than web fundamentals came to mind, the first name I chose for the project was (i)nsaneui (which definitely made a lot of sense as a name). I then replaced it with a name inspired by one of my favorite prog-rock song 🎶 La Carrozza di Hans by PFM, released in 1972.

The song tells the tale of a mysterious and dreamlike journey, where a merchant named Hans travels in a carriage through a surreal landscape. It explores themes of adventure, discovery, and the blending of reality with the fantastical. The mood of the song is nostalgic yet forward-looking, a reflection on past stories and timeless themes with a progressive twist. This resonated with me as I developed Hansui — a project that, much like the song, aims to revisit the fundamentals while exploring new ways to interpret them. It’s about embracing simplicity and timeless elements, while bringing a sense of wonder and innovation to what might seem familiar.

If you’re curious about the song, be sure to listen to it until the end to feel the flow ❤️

Features

• Hansui components are fully accessible, incorporating ARIA attributes, keyboard navigation, and WCAG 2.1 AA compliant color contrasts. Accessibility is a core principle, ensuring that all users can easily interact with your web applications regardless of ability.
• Seamless integration is another key feature of Hansui. These components can effortlessly blend with popular UI libraries like Tailwind CSS without causing style clashes. Furthermore, Hansui works smoothly with tools like HTMX and AlpineJS, making it a versatile addition to any modern project stack. Whether you're building with traditional server-rendered HTML or leveraging more interactive, JavaScript-driven behaviors, Hansui is designed to adapt.
• Hansui components are highly configurable and come with a variety of style variants to suit different design needs. The APIs aim to be clear and intuitive, making it easy to customize each component to fit your specific requirements.
• Hansui supports theming through CSS custom properties, allowing you to adjust the look and feel of your components seamlessly to match your brand or project style.
• Hansui's components are lightweight, accessible, and fully compatible with modern web development practices. The goal is to provide you with a simple, robust set of building blocks that fit seamlessly into your workflow, helping you create rich user experiences without sacrificing performance or usability.

Ready to dive in? Start with our Getting Started Guide to quickly set up Hansui in your project and learn the basics.

Already familiar and looking for components? Check out the full list and see how Hansui can fit into your next project today.