Rails Designer v1.10: Make your form fields look pretty 🌸

Back once again with an update! The last one for this year (can you believe it's almost 2025?!). 🤯

Lots of stuff is happening right now. This is what's in this edition:

• HQ updates


• What's new in the Rails UI Components Library

As always: love to read your replies! 🙋 If you are celebrating: have a lovely Christmas and see you again next year! 🎄🎁🎆

HQ Updates

Busy bees at HQ. 🐝☀️🌴 Let me quickly go over every new thing:

🔍 Rails UI Audit

I am trying something new: Rails UI Audits. 🔍 If you want to improve your Rails app’s UI and usability but aren’t sure where to start, I can help you with some guidance. You will get high-impact, easy to implement improvements in a tidy report. 📝 Read all about it here.

🪡 Tailor Made UI

If you want more hands-on help. Tailor Made UI is for you. 🫵 I help companies build better products, working with your team part-time as an experienced Rails Product Engineer. It has proven réally popular — I am fully booked until March 2025 (and currently already in talks with more companies), but do reach out (it's first come, first serve! 🎅). 🤙

🍨 Vanilla Rails UI Components Library

I am gauging interest in a separate library with vanilla Rails UI Components. Partials (they are powerful), helpers and vanilla CSS. That's it. Sounds like something you are looking for? Do check in! 🛎️

📱 Rails Icons 1.0.0

After about 8 months and just over a modest 5,000 downloads, Rails Icons 1.0 is released. It now syncs the icons from their respective GitHub repos, has animated icons, and can add any icon library. The API stayed mostly the same, but there is one breaking change (attribute changed from set to variant). Star it on GitHub. ⭐

🤹 Stimulus FX

Also new is a cute library, called Stimulus FX. It's a collection of custom action options for Stimulus. WTF, you say? Read this article to learn all about it. It too is on GitHub. ⭐

🥷 Stealth Dom Id

Talking about OSS, have you already seen stealth_dom_id (🙈)? It extends Rails' dom_id helper to support custom attribute-based identifiers, so your primary id's aren't exposed. Already released some time ago, but I think you like it.

What's new in the UI Component Library

What's nice about Rails Designer's UI Components Library, is that over the last 10 months it has gotten better and more feature-complete. 🏁 Don't get me wrong, I have a long list of ideas for components and variants, but at its core it is stable and it is used by a lot of teams around the world. 🌍

Today I am excited to announce a feature that has been on my roadmap since before launch! 💖 Starting today, your input fields will look sweet out-of-the-box with the included custom Form Builder! 👷🚧

After install, you can use your form helpers like normal (just omit the class attribute; that is taking care off):

<%= form.text_field :name, placeholder: "e.g. first- and last name", required :true %>

Rails Designer's Form Builder will pick it up, and inject the Tailwind CSS classes for you. Carefully crafted by yours truly, but fully customizable (and soon more styles will be available). 👗

Also included are Smart Inputs. 🧠 They work great for basic forms, like log in or sign up forms:

<%= form.input :email_address %>

<%= form.input :password %>

The Form Builder will wrap these in a div-element (or when present, use the new FieldComponent), include a label-element (or when present, use the FormLabelComponent) and renders the correct field type. In above cases it will be email_field and password_field.

Cleans up your forms (and views) pretty nicely. 🧹 As mentioned you can update the default styles in your rails_designer initializer. Look for config.form_builder.input_css = "".

Check for more updates the complete changelog here.