Over the past ten years many (HTML/CSS) UI components libraries have launched. The last couple of years, with the rise of JavaScript frameworks, many newly-launched are now focused on solely on those frameworks (eg. React).
But there are still plenty of solid UI components libraries for Ruby on Rails apps. I’ve listed those here along with my professional opinion on them as a Rails Product Engineer with over a decade of experience. Important note: I’m also the creator of Rails Designer.
Bootstrap
Let’s start with probably the most knownused library of them all: Bootstrap. There are probably few Rails developers who haven’t used it at some point in their career (either by choice or not). It’s easy to add to your app.
My main gripe with it has always been that, out-of-the-box, Bootstrap is not really well suited for SaaS app UI’s. Specifically its scale seems to cater more towards (marketing) sites. There are many layers (ie. themes) you can add on top of it, but it makes for yet another dependency. And not unimportant: most leave you to think about components on your own. Also there is no support for Hotwire (Turbo, nor Stimulus).
Tailwind UI
Tailwind UI is probably the component library that’s best catered towards modern SaaS apps. It has an extensive library of beautifully-crafted UI components. It uses Tailwind CSS, which might be a pro to you (it is to me).
Unfortunately it is built for React apps (plain HTML is provided too). Leaving Rails developers to port over every component they want to use. This is not too hard for just the HTML (similar to Bootstrap), but it can get annoying for the components that need JavaScript as you have to write all the JS yourself!
Bulma
Bulma is a CSS framework. This means it has no JavaScript based components out-of-the-box. It’s API is clear and easy to read. Adding it to your Rails app is straightforward enough.
With a limited library of, general-purpose, components, Bulma is not the best option for SaaS UI’s built with Rails, but a great basis to build from yourself.
Foundation
Foundation is a CSS and JS framework with elements that focuses mostly on (marketing) sites. Most elements can still be used in a SaaS app too.
With your typical elements like buttons, dropdown menu and navigation, it’s similar to Bootstrap. The Rails/Ruby gems all seem but abandoned—something to keep in mind if you are considering this library.
Rails Designer
Of course I need to add Rails Designer to the list. It’s the first professionally-designed UI components library for Ruby on Rails. Built with ViewComponent, designed with Tailwind CSS and enhanced with Hotwire. It’s designed for modern Rails (SaaS) apps with many UI components that every SaaS uses. While still fairly new—only launched early 2024—it’s already used by hundreds of teams and developers.
With just one command to run, you have access to an extensive library with components, within your Rails app. Ready to add into your own app.
With a still ever-growing library, it’s really cheap too at just $99 (one-time payment).
Learn more about Rails Designer.
Is there one missing? Let me know about it.