What’s new with Rails UI - Two new themes
Hey – It’s been a bit…I hope you are doing well.
I'm excited to share the latest major release after about two months of waking up ridiculously early to work on Rails UI.
This update expands on the initial release by bundling many more pages to each of the two initial themes, Retriever for Bootstrap and Hound for Tailwind CSS. Yes, I name the themes after dog breeds 🐕.
The initial launch supplied some marketing pages to give you a feel for the design. Accompanying each theme was also a design system full of reusable components and code snippets. This update introduces more application-heavy experiences.
Design Progression
Many themes you see in the wild cater to a specific use case and/or need. There isn’t a specific use case for the first two Rails UI themes I gravitated towards. Much of the UI is common stuff you might see in a SaaS app related to account settings, notifications, billing, and more. Other pages branch out into more use-case-specific designs. Think project management, CRM, communication, etc…
In the future, I may narrow focus to a specific type of application design to offer ready-designed apps you can use, but with that comes many assumptions which isn’t always best.
If you have an app use case in mind, just hit reply and let me know! Think CRM, Content publishing, Data/Metrics, Finance, Hosting software solutions, API access (metered billing), etc…
Themes are incomplete by design. I will likely be adding more pages as time allows and ideas emerge, so look for future updates.
Putting a theme to practice
Because I’m crazy, I’ve started several other projects alongside Rails UI. In each project, I have installed Rails UI and leveraged the built-in themes to test things out and “dogfood” my product.
I don’t mean to toot my own horn, but doing this has saved me loads of time and the common time-consuming headaches we Rails folk have to deal with each new app we build.
Leveraging the design system, pre-designed scaffold UI templates, and installing preferred pages (if any) in a few clicks is a game changer. 10x developer much?!
Adding and removing pages with one-click
I like to think of pages as a starting point to take and run with. I realize not every page will apply to a given app, so I wanted to make it easy to opt in or out. Now you can add and remove pages with a theme in one click.
These pages live inside a dedicated directory with a new route. You can tweak these, but Rails UI will only remove or add the defaults.
Bundled JavaScript
So far, each theme has a charting component and various interactive components like dropdowns, accordions, modals, and more. These are built using Stimulus.js. When you install a theme, the JavaScript for common elements gets copied over depending on your CSS framework. For the charting UI, I added embedded JavaScript with commented instructions on how to use Stimulus.js to make it all work.
What’s up next?
More themes! I had an ambitious goal of 4 themes before launch. Little did I realize how much work that was at the time.
Having built a series of foundations for the Rails UI internals, I think things will go a bit more smoothly in the future. My process is tedious but straightforward.
Expand the marketing site
I think improving how I communicate what Rails UI is to a visitor of railsui.com is crucial to get this project off the ground.
Focusing on a better landing page and theme-specific pages might be a good step forward.
That way, theme demos are easily accessible without downloading the gem. There's also no way to purchase premium versions of Rails UI yet, so I need to sort that out from a website lead/top-of-funnel perspective.
Customization is expected
These themes will forever be incomplete and are open to interpretation. As you apply the theme and grow your own app, you can leverage the design system to build pages with components and content.
I have found the ole "find and replace" technique on the Tailwind side to be the easiest path to switch colors across the theme if you wanted to. In the future, I might solve this problem better with more branded class names that change at the Tailwind config level rather than scattered throughout the theme. Baby steps!
All preview builds are static sites built with Vite.js, Handlebars.js, Bootstrap or Tailwind CSS, and Cloudflare pages. I recommend installing the gem for the whole experience.
Demos
Alright, enough chit-chat; below are links to preview the new themes.
- Retriever theme - Bootstrap – A theme for a software startup that requires internal admin controls.
- Hound theme - Tailwind CSS - A theme for a CRM tool with an async messaging component.
Rails UI gem source
Plug: Do you need design help?
If the self-serve model of Rails UI doesn’t appeal to you, I have another option you should check out called Rails UI Custom, where I partner with you independently to design/build cool custom stuff. There is limited space, so act fast!
Thanks for reading if you made it this far. I’ll be over on Twitter (X?) posting more day-to-day updates in between the ones you receive here. I’ll be back with another update soon.