rails.style is a curated resource hub for Rails developers. It currently focuses on UI related libraries, and will expand to cover other topics (background jobs, administration, mailers, newsletters, etc.) in the future.

Rendering Solutions

Early Rails applications use ERB (or others like Haml) partials and bloated helpers. Modern Rails projects often emphasizes encapsulation and component-based design. There’s a few libraries to create reusable and testable UI components.

Β  Encapsulation Templating Output Performance*
ERB Partial Bad Template HTML 3
ViewComponent Not Bad Ruby Class + Template HTML 6
Cells Not Bad Ruby Class + Template HTML 2
Hanami::View Not Bad Ruby Class + Template HTML, JSON, XML -
Phlex Not Bad Pure Ruby HTML (more planned) 8
Papercraft Not Bad Pure Ruby HTML, JSON, XML 9

* performance data source: view-layer-benchmarks

Rails-specific Design Systems & UI Libraries

Name Batteries Rendering Styling Frontend
Framework
Pricing Activity
Status
GOV.UK GOV.UK πŸ—‚οΈ Design system
🎁 Components (~40)
πŸ“„ Prototype Kit
πŸ–ΌοΈ Figma Library
πŸ’Ž Ruby Gem
ViewComponent
Form Builder
Custom - Free Active
Polaris Polaris πŸ—‚οΈ Design system
🎁 Components (~70)
🎨 Icons
πŸ–ΌοΈ Figma Library
πŸ’Ž Ruby Gem (unofficial)
ViewComponent
(unofficial)
Custom React (official)
Stimulus port (unofficial)
Free Active
Primer Primer πŸ—‚οΈ Design system
🎁 Components (~90)
🎨 Icons (Octicons)
πŸ–ΌοΈ Figma Library
πŸ’Ž Ruby Gem
ViewComponent Custom React
(react edition)

Web Components
(view_component edition)
Free Active
CSS Zero CSS Zero πŸ—‚οΈ Components (~30)
πŸ“„ Templates (few)
πŸ’Ž Ruby Gem
ERB Custom Stimulus Free Active
Protos Protos πŸ—‚οΈ Components (~20)
πŸ’Ž Ruby Gem
Phlex Tailwind CSS
daisyUI
- Free Active
Rails Designer Rails Designer πŸ—‚οΈ Components (~40)
πŸ“„ Templates (few)
πŸ’Ž Ruby Gem
ViewComponent Tailwind CSS Stimulus Paid
(starting $99)
Active
RailsUI RailsUI πŸ—‚οΈ Components (~20 in free version)
πŸ“„ Templates (~20 pages x ~3 themes)
πŸ’Ž Ruby Gem
ERB Tailwind CSS Stimulus Freemium
(starting $299/year)
Active
RubyUI<br> (formerly Phlex UI) RubyUI
(formerly Phlex UI)
πŸ—‚οΈ Components (~40)
πŸ’Ž Ruby Gem
Phlex Tailwind CSS Stimulus Free Active
shadcn/ui on Rails shadcn/ui on Rails πŸ—‚οΈ Components (~30)
πŸ’Ž Ruby Gem
ERB + helpers
Form Builder
Tailwind CSS
shandcn/ui
Stimulus Free Active
ZestUI ZestUI πŸ—‚οΈ Components (~20)
πŸ’Ž Ruby Gem
Phlex Tailwind CSS Stimulus Paid
(starting $69)
Paused
X

Posts and Discussions