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 |
---|---|---|---|---|---|---|
|
ποΈ Design system π Components (~40) π Prototype Kit πΌοΈ Figma Library π Ruby Gem |
ViewComponent Form Builder |
Custom | - | Free | Active |
|
||||||
|
ποΈ Design system π Components (~70) π¨ Icons πΌοΈ Figma Library π Ruby Gem (unofficial) |
ViewComponent (unofficial) |
Custom | React (official) Stimulus port (unofficial) |
Free | Active |
|
||||||
|
ποΈ Design system π Components (~90) π¨ Icons (Octicons) πΌοΈ Figma Library π Ruby Gem |
ViewComponent | Custom | React (react edition) Web Components (view_component edition) |
Free | Active |
|
||||||
|
ποΈ Components (~30) π Templates (few) π Ruby Gem |
ERB | Custom | Stimulus | Free | Active |
|
||||||
|
ποΈ Components (~20) π Ruby Gem |
Phlex | Tailwind CSS daisyUI |
- | Free | Active |
|
||||||
|
ποΈ Components (~40) π Templates (few) π Ruby Gem |
ViewComponent | Tailwind CSS | Stimulus | Paid (starting $99) |
Active |
|
||||||
|
ποΈ Components (~20 in free version) π Templates (~20 pages x ~3 themes) π Ruby Gem |
ERB | Tailwind CSS | Stimulus | Freemium (starting $299/year) |
Active |
|
||||||
(formerly Phlex UI) |
ποΈ Components (~40) π Ruby Gem |
Phlex | Tailwind CSS | Stimulus | Free | Active |
|
||||||
|
ποΈ Components (~30) π Ruby Gem |
ERB + helpers Form Builder |
Tailwind CSS shandcn/ui |
Stimulus | Free | Active |
|
||||||
|
ποΈ Components (~20) π Ruby Gem |
Phlex | Tailwind CSS | Stimulus | Paid (starting $69) |
Paused |
|
X
π¬