Rails UI Update - A Refresh and Refocus

Since the last update, I’ve heard from many of you about Rails UI and what’s working and what's not. In this update, I’m excited to share a more focused journey. Try the latest version of Rails UI on GitHub.

Watch the video walk-through

So long Bootstrap

At the time of writing, Rails UI lost its very first theme called Retriever. I decided to remove support for Bootstrap from Rails UI, which meant removing the very first theme based on it. Here’s my reasoning:

I posted a poll on X and heard from a few folks favoring Tailwind CSS as the underlying CSS framework. The vote was unanimous.

I also didn't love maintaining two CSS frameworks as they make everything quite complicated.

Bootstrap has its place and has had a massive role in web design in the past decade, but the non-opinionated and productive nature of Tailwind CSS pairs nicely with the front-end design and goals of Rails UI.

There is no perfect solution out there. Narrowing the focus will pay dividends and keep things simple in the long run.

New Theme: Shepherd

shepherd.jpeg

I’m excited to introduce the newest Rails UI theme called Shepherd. This theme is inspired by the real estate space and has similar UI components and patterns you might find on an app like Airbnb.

The theme has a design system of components and snippets you can use in your app immediately. Also included is a series of pages you can add or remove from your app in a few clicks.

As always, themes are a work in progress, and new pages/components will make their way into each over time. All you’ll need to do is update your version of Rails UI.

Customize your brand colors

brand colors.jpeg

Tailwind CSS has an extensive suite of colors, but sometimes we devs and designers need something more tailor-fit.

With this in mind, I introduced a color scheme section of the theme settings for primary and secondary brand colors. You can edit each or change them directly inside your railsui.yml config file.

When you install a theme, it comes with default primary and secondary color palettes that can be permanently changed.

In the gem, I reference a color toner tool to help you make generating colors easier. It might require a little tweaking but should hopefully save you time if you don’t already have an 11-color shading scheme similar to Tailwind CSS defaults.

Next, on the Agenda

Convert Retriever Bootstrap theme to Tailwind CSS

Throwing one theme away was a tricky thing to accept given the time it required to produce, so I’m at a crossroads about whether to convert it from Bootstrap to Tailwind CSS or carry on adding fresh themes and components. It would save me time not having to design from scratch, but ultimately will require a complete rewrite. I’ll see how this plays out.

Add new themes

As always, this is a pending task for me. The goal is dozens over time. Baby steps...

Marketing site

If you visit railsui.com today, you will see a lot of white space and wonder what these themes look like. I feel the same way.

One thing that’s been bugging me is that to preview any theme, you need to install the Rails UI gem first.

That’s a crappy experience, so I’m going to change that and make the marketing site solve help solve this.

The problem is that you need themes to preview, and last I checked, I only have two, so I haven’t pulled the trigger on this yet.

The time is approaching soon.

Give before you get

I believe in providing value until it hurts or until customers ask to pay you. I've had a few do so!

I haven’t pushed hard to monetize this out of the gate. I’ve seen some other folks in the space enter the market and try that, and more power to them.

Ultimately, I want Rails UI to be something Rails developers genuinely want to use.

I have a general idea of a monetization strategy, but it will be some time before It gets introduced.

Thanks for your help

To those who offered insight and opinions or pointed out bugs so far, I can’t thank you enough. If you're following along as I build this, thank you. Please keep this coming, as it helps shape the path forward, and most of all, keep going!

That’s all for now.

Stay safe,
Andy