A retro post! Server-side HTML in 2025! A technology approach I used heavily… 20 years ago.
Some background
At my most recent previous companies, most of our development projects involved a very complex front-end SPA. Angular was our main specialty, though we occasionally used React and others. More recently, at my new firm we acquired an existing substantial React application, so I’m still deep in SPAs.
But some of our product ideas might be more expediently realized with a straightforward server-side HTML architecture, with just a sprinkling of JavaScript powered components, i.e. islands of interactivity, with as little baggage as possible.
Here are my notes from a couple hours of researching suitable available component sets. Feedback is welcome. I’m sure I missed some.
My criteria, which I may not have applied perfectly to this list, were:
- Cannot rely on React, Angular, etc.
- Interactivity in the box – not just visuals.
- Preferably styled with Tailwind.
- Open source or at least mostly open source.
- Free is OK, paid is OK if the price is readily visible and measured in hundreds, not thousands.
- The more complete the component set, the better.
- Project is alive, continuous ongoing activity in GitHub.
Contenders
I initially wrote these in no particular order and then moved the two strongest contenders to the top, in no particular order.
Shoelace https://shoelace.style/
Shoelace is built as a set of web components/custom elements using the lit-element library an excellent technical choice. It is ready for standalone use, or with four of the most popular SPA frameworks.
Shoelace includes numerous components, With a somewhat minimal but very nice visual style. It uses the “design token” concept for ready customizability.
Shoelace is very impressively polished and complete for an open source project. It was purchased by Font Awesome back in 2022, who is apparently continuing to support its progress.
Strong contender.
FlowBite https://flowbite.com/
FlowBite is a very large collection of components styled with tailwind and with framework-neutral JavaScript-powering interactivity. Also includes integration guides to work with 20 or so frameworks, both SPA and server-side. We can include some more elaborate components than many other collections on this list, including a date range picker, a data table, etc.
FlowBite is “freemium”, with some of the good stuff behind a $299 per-developer cost.
Strong contender.
Alpine.js components https://alpinejs.dev/components
Alpine.js is a popular and to my eye, well-designed JavaScript interactivity add-on library/framework. I think of this as being what the original AngularJS could have been, if it had smaller-scale goals. Alpine.js is popular as a tool to add interactivity to standalone components.
The Alpine.js team also ships a set of already designed components. You can see them in action on the website or pay $99 for a lifetime access to the code and screencasts about the code.
The styling of these components is pretty minimal, which is a good fit for many of the things I build.
This collection appears to have only 9 or so components – A good start, but I will probably choose something that has, quote, everything I think I will need.
Pines UI: https://devdojo.com/pines
Speaking of Alpine.js, Pines UI is a component set with interactivity powered by Alpine.js (and styled with Tailwind).
Pines includes a couple dozen components. There is relatively little activity in the project repository.
Artisan UI: https://x-aui.com/
Artisan appears to be specific to Laravel. I included it here because it looks like a pretty good implementation of the concept, but I’m not a Laravel user.
DaisyUI https://daisyui.com/
Daisy does not match my criteria particularly well. It is only the visual design of components, not the JavaScript, that adds behavior. And it is structured as a Tailwind plugin.
HyperUI https://www.hyperui.dev/
Another one with just visuals, no behavior.
Tailwind UI Block https://tailwindcss.com/plus/ui-blocks
TailwindCSS is an incredible contribution to the software development world – It would be great to support them by choosing their commercial add-on for components.
Unfortunately, offer full, and it’s including behavior if you are using React or Vue, you are on your own without those. So this isn’t a fit for my criteria.
Just AI It?
A couple of years ago, I thought of the kind of component sets listed here as indispensable for building most any real app. But today, you can pull up Bolt.new or v0.dev and ask it to make you a component on the spot. With a little nudging, it could be a web component written with lit-element, or whatever other technical platform fits best into what you are building. While not as tested and production proven as a published component set, it might give you something close enough and optimal for your use case. It’s possible that five years from now, the notion of having to go pick out a component set will be completely obviated with amply good enough code generated on demand at the point of need.