Powered by the fabulous ViewComponent, DaisyUI, and TailwindCSS libraries, our components are designed to be fast, flexible, and easy to use directy in Ruby on Rails!
Utlize HAML so your views are simple, concise, and easy to understand.
No more messy ERB files with all of their closing tags and Ruby wrappers. HAML feels more natural to write and reduces file sizes, making your views easier to read and maintain.
PLUS! You can utlize filters like Markdown, CoffeeScript, Textile, and many more!
<% # Ruby %>
<% 5.times do |i| %>
<% if i.even? %>
<p class="odd">Number <%= i %></p>
<% else %>
<p class="even">Numero <%= i %></p>
<% end %>
<% end %>
- # HAML
- 5.times do |i|
- if i.even?
%p.odd Number #{i}
- else
%p.even Numero #{i}
Can't find exactly what you need? No problem! Build your own components with ease using our simple, flexible, and powerful DSL.
# app/components/application_component.rb
class ApplicationComponent < LocoMotion::BaseComponent
# Add your custom / shared component logic here!
end
- # app/components/character_component.html.haml
= part(:component) do
= part(:head)
= part(:body) do
= content
= part(:legs)
# app/components/character_component.rb
class CharacterComponent < ApplicationComponent
define_parts :head, :body, :legs
def before_render
set_tag_name(:head, :h1)
add_css(:head, "text-3xl font-bold")
set_tag_name(:body, :p)
add_stimulus_controller(:body, "character-body")
add_css(:body, "text-lg")
set_tag_name(:legs, :footer)
add_css(:legs, "text-sm")
end
end
Keen an eye out as we'll be adding more components, guides, and
suggested gems for you to build amazing Rails apps!