Articles

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

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