Components, Guides, and Paradigms

for  CRAZY   CRAZY  -fast Development

in Ruby on Rails!

.flex.flex-col.sm:flex-row.items-center.gap-4
  = daisy_button "Accent Button", css: "btn-accent"
  = daisy_tip("Click to Swap") do
    = daisy_swap off: "🌚", on: "🌞", css: "swap-rotate text-4xl"
  = daisy_badge "Large Badge", css: "badge-secondary badge-lg"

<% # 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}

Build Your OWN Components

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

Guides & Paradigms

Beyond the components, we share the broader philosophies and tooling we recommend for building Rails applications the LocoMotion way.

More Coming Soon!

Keep an eye out as we'll be adding more components, guides, and
suggested gems for you to build amazing Rails apps!