5 UI Components Library for Ruby on Rails (in 2024)

This article was originally published on Rails Designer

Over the past ten years many (HTML/CSS) UI components libraries have been launched. The last couple of years, with the rise of JavaScript frameworks, many newly-launched are now focused on solely on those (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, the first professional-designed UI components library for Rails.

Bootstrap

Let’s start with probably the most known library of them all: Bootstrap. There are probably few Rails developers who haven’t used it at some point. 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. 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.

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.

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.

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.