Articles

Improve your UI and UX of your Rails apps with the articles focusing on Tailwind CSS, ViewComponent and Hotwire.

  1. Build a Notion-like editor with Rails
  2. Multiple component variants with Tailwind
  3. Rails link_to_if and link_to_unless
  4. Free Icon Libraries for Rails Apps
  5. Introducing Rails Stats
  6. Use cases for Turbo's Custom Events
  7. How to order attributes on HTML elements
  8. The Best of 2024 from Rails Designer (number 1 won't surprise you 🤪)
  9. Use Tailwind CSS with Your Rails Forms
  10. Introducing Rails UI Audit
  11. Announcing Stimulus FX
  12. Rails Icons 1.0.0 is here
  13. Simple accordion without JavaScript
  14. Advanced Stimulus: Custom Action Options
  15. Why Disconnect in Stimulus Controllers
  16. Stimulus Features You (Didn't) Know
  17. Spacer Components introduced in ViewComponent 3.20
  18. Inline Unsupported Browser Warning (using Rails 7.2 feature)
  19. Inheritance with Stimulus Controller
  20. Don't expose primary id's with Rails' dom_id
  21. Announcing: Build a SaaS with Ruby on Rails
  22. Rails' Partial Features You (didn't) Know
  23. Mathematical and Optically alignment in (visual/UI) design
  24. Store UI State in localStorage with Stimulus
  25. Use Action Cable with Your Main PostgreSQL Database
  26. Hotwire and Stimulus Tools You Need to Know
  27. Basic Autocomplete Without JavaScript using Datalist
  28. Tailwind CSS Patterns
  29. Broadcast Turbo Streams without Redis
  30. New: Rails Development Tool
  31. How do Turbo Streams Work (behind the scenes)
  32. Changing CSS as You Scroll with Stimulus
  33. Announcing JavaScript for Rails Developers
  34. Rails UI Components Library Tips and Tricks
  35. Smooth Transitions with Turbo Streams
  36. S3 Alternatives for Rails' ActiveStorage
  37. ActiveStorage Direct Upload with Stimulus
  38. RailsDesigners.com, Elite Ruby on Rails Product Engineers & UI Designers
  39. Drag & Drop Images with Preview using Stimulus Outlets
  40. Conditionally Style Turbo Frame Content
  41. Fix Any CSS Z-index Issue With This One Trick
  42. Create a Resizable Navigation with Stimulus
  43. Connected and Disconnected Target Callbacks with Stimulus
  44. Building Nested Forms in Rails with Stimulus
  45. Refactor Stimulus.js Controllers to Use Change Callbacks
  46. Launch a Turbo Modal with URL Params Using Stimulus
  47. Tidy up your Rails code with `inquiry`
  48. Better Inline Validation for Rails Forms (with ViewComponent or partials)
  49. Introducing: Beautiful Layouts for Your Rails App
  50. When to Use call, erb_template, or html.erb in Rails ViewComponents?
  51. Nested Forms With Turbo (without dependencies)
  52. Nested Layouts with Ruby on Rails
  53. Preview an Image Before Upload with Hotwire/Stimulus
  54. New Rails Designer Tool: beautiful Tailwind CSS gradients
  55. From Partials (and Helpers) to Embracing ViewComponent in Rails
  56. Use CSS' `only-child` instead of `if/else` logic
  57. Inline Save and Add Another with Rails and Hotwire
  58. 5 UI Components Libraries for Ruby on Rails (updated for 2025)
  59. Add a “X is writing…” with Rails and Turbo
  60. Create a String to Color Helper with Ruby
  61. Rails Designer V1 is here!
  62. Add a custom Tailwind CSS class for reusability and speed
  63. UI Design Tips Using Tailwind CSS for Developers
  64. When to use `link_to` and `button_to` in Rails
  65. How to add “Save and add another” feature to Rails apps
  66. How to Create an Undo Action with Rails
  67. How Layouts Work in Rails
  68. How to disable Rails Form's `.field_with_errors`
  69. Update a Progress Bar using Turbo Streams (using Custom Actions)
  70. PayPal is Now Accepted
  71. Lesser Known Rails Helpers to Write Cleaner View Code
  72. Communicating between Stimulus Controllers using Outlets API
  73. Customize the Turbo Progress Bar
  74. Inline SVG Icons in Your Rails App
  75. Custom Confirm Dialog For Turbo and Rails
  76. Simple Preferences to Any Resource for Rails
  77. How to Create a Stimulus Toggle Class Controller
  78. How to Add Disabled State to Buttons with Turbo & Tailwind CSS
  79. New in Rails Designer: the Command Menu Component
  80. How to Work with Forms inside Forms in Rails
  81. Hidden Gems of Tailwind CSS
  82. ViewComponent over Turbo Stream Broadcasts
  83. Hello 100 Rails Designers!
  84. Introducing Rails Icons: One Gem to Rule Them All
  85. Guide to Slots in Rails' ViewComponent
  86. Easy Peasy Form Validation Errors with Rails Turbo Frames (modals)
  87. Data-Attributes Magic with Tailwind CSS & Stimulus
  88. How to Toggle Multiple CSS Classes with Stimulus
  89. How to Properly Structure Stimulus Controller
  90. Make Your Rails App Future Proof: Move From React to Hotwire
  91. Custom Meta Titles in Rails Apps: A Quick Guide
  92. How to implement and customize Rails Flash Messages (notifications)
  93. Why choose ViewComponent over Rails partials
  94. Conditionally Add CSS Classes in Your Stimulus Controllers
  95. Conditionally Add CSS Classes to Your Views and Components
  96. How to add a skeleton UI to Rails with Turbo
  97. How to add Hotkeys to your Rails App with Stimulus
  98. Favicons in Rails Apps (updated for 2025)
  99. The missing UI Components Library for Rails: Introducing Rails Designer
  100. Missing Styles from Tailwind CSS in ViewComponent?
  101. How to create Modals with Rails and Hotwire (and Tailwind CSS)
  102. Quicktips for ViewComponent with Tailwind CSS/Hotwire