Articles

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

  1. Building Nested Forms in Rails with Stimulus
  2. Refactor Stimulus.js Controllers to Use Change Callbacks
  3. Launch a Turbo Modal with URL Params Using Stimulus
  4. Tidy up your Rails code with `inquiry`
  5. Better Inline Validation for Rails Forms (with ViewComponent or partials)
  6. Introducing: Beautiful Layouts for Your Rails App
  7. When to Use call, erb_template, or html.erb in Rails ViewComponents?
  8. Nested Forms With Turbo (without dependencies)
  9. Nested Layouts with Ruby on Rails
  10. Preview an Image Before Upload with Hotwire/Stimulus
  11. New Rails Designer Tool: beautiful gradients with Tailwind CSS
  12. From Partials (and Helpers) to Embracing ViewComponent in Rails
  13. Use CSS' `only-child` instead of `if/else` logic
  14. Inline Save and Add Another with Rails and Hotwire
  15. 5 UI Components Libraries for Ruby on Rails (in 2024)
  16. Add a “X is writing…” with Rails and Turbo
  17. Create a String to Color Helper with Ruby
  18. Rails Designer V1 is here!
  19. Add a custom Tailwind CSS class for reusability and speed
  20. UI Design Tips Using Tailwind CSS for Developers
  21. When to use `link_to` and `button_to` in Rails
  22. How to add “Save and add another” feature to Rails apps
  23. How to Create an Undo Action with Rails
  24. How Layouts Work in Rails
  25. How to disable Rails Form's `.field_with_errors`
  26. Update a Progress Bar using Turbo Streams (using Custom Actions)
  27. PayPal is Now Accepted
  28. Lesser Known Rails Helpers to Write Cleaner View Code
  29. Communicating between Stimulus Controllers using Outlets API
  30. Customize the Turbo Progress Bar
  31. Inline SVG Icons in Your Rails App
  32. Custom Confirm Dialog For Turbo and Rails
  33. Simple Preferences to Any Resource for Rails
  34. How to Create a Stimulus Toggle Class Controller
  35. How to Add Disabled State to Buttons with Turbo & Tailwind CSS
  36. New in Rails Designer: the Command Menu Component
  37. How to Work with Forms inside Forms in Rails
  38. Hidden Gems of Tailwind CSS
  39. ViewComponent over Turbo Stream Broadcasts
  40. Hello 100 Rails Designers!
  41. Introducing Rails Icons: One Gem to Rule Them All
  42. Guide to Slots in Rails' ViewComponent
  43. Easy Peasy Form Validation Errors with Rails Turbo Frames (modals)
  44. Data-Attributes Magic with Tailwind CSS & Stimulus
  45. How to Toggle Multiple CSS Classes with Stimulus
  46. How to Properly Structure Stimulus Controller
  47. Make Your Rails App Future Proof: Move From React to Hotwire
  48. Custom Meta Titles in Rails Apps: A Quick Guide
  49. Flash Messages (notifications) in Rails Apps
  50. Why choose ViewComponent over Rails partials
  51. Conditionally Add CSS Classes in Your Stimulus Controllers
  52. Conditionally Add CSS Classes to Your Views and Components
  53. How to add a skeleton UI to Rails with Turbo
  54. How to add Hotkeys to your Rails App with Stimulus
  55. Favicons in Rails Apps: the 2024 way
  56. The missing UI Components Library for Rails: Introducing Rails Designer
  57. Missing Styles from Tailwind CSS in ViewComponent?
  58. How to create Modals with Rails and Hotwire (and Tailwind CSS)
  59. Quicktips for ViewComponent with Tailwind CSS/Hotwire