Quickstart
Build your first component in 5 minutes and experience the Rails magic.
Variants
Buttons come in three variants: solid, outline, and ghost.
Preview
<%= rui_button("Solid", variant: :solid, color: :primary) %>
<%= rui_button("Outline", variant: :outline, color: :primary) %>
<%= rui_button("Ghost", variant: :ghost, color: :primary) %>Colors
Use semantic colors for common actions or any Tailwind color:
Semantic Colors
Preview
<%= rui_button("Primary", color: :primary) %>
<%= rui_button("Success", color: :success) %>
<%= rui_button("Warning", color: :warning) %>
<%= rui_button("Danger", color: :danger) %>
<%= rui_button("Info", color: :info) %>Tailwind Colors
Preview
<%= rui_button("Blue", color: :blue) %>
<%= rui_button("Purple", color: :purple) %>
<%= rui_button("Pink", color: :pink) %>
<%= rui_button("Amber", color: :amber) %>
<%= rui_button("Teal", color: :teal) %>
<%= rui_button("Emerald", color: :emerald) %>Sizes
Five sizes available: xs, sm, base, lg, and xl.
Preview
<%= rui_button("Extra Small", size: :xs) %>
<%= rui_button("Small", size: :sm) %>
<%= rui_button("Base", size: :base) %>
<%= rui_button("Large", size: :lg) %>
<%= rui_button("Extra Large", size: :xl) %>With Icons
RapidRails UI includes 1500+ Lucide icons. Add them with with_icon:
Leading Icons
Preview
<%= rui_button("Save", color: :primary) do |button|
button.with_icon(name: :save, position: :leading)
end %>
<%= rui_button("Download", color: :success) do |button|
button.with_icon(name: :download, position: :leading)
end %>
<%= rui_button("Delete", color: :danger) do |button|
button.with_icon(name: :trash_2, position: :leading)
end %>Trailing Icons
Preview
<%= rui_button("Continue", color: :primary) do |button|
button.with_icon(name: "arrow-right", position: :trailing)
end %>
<%= rui_button("Open Link", color: :info) do |button|
button.with_icon(name: "external-link", position: :trailing)
end %>Icon-Only Buttons
Preview
<%= rui_button(color: :danger, shape: :circle) do |button|
button.with_icon(name: :heart)
end %>
<%= rui_button(color: :primary, shape: :circle) do |button|
button.with_icon(name: :settings)
end %>
<%= rui_button(color: :success, shape: :circle) do |button|
button.with_icon(name: :plus)
end %>Form Integration
Here's where RapidRails UI really shines. Use the form builder for auto-labeled submit buttons:
<%= form_with model: @post do |f| %>
<div class="space-y-4">
<%= f.text_field :title, class: "..." %>
<%= f.text_area :content, class: "..." %>
</div>
<div class="mt-6">
<%= f.rui_button %>
</div>
<% end %>
Magic! The button automatically shows "Create Post" for new records or "Update Post" for existing ones.
You can customize the form button too:
<%= f.rui_button "Save Draft", color: :zinc, variant: :outline %>
<%= f.rui_button color: :success, size: :lg do |button|
button.with_icon(name: :check, position: :leading)
end %>Checkbox Example
Here's another component to show the RapidRails UI pattern:
Preview
<%= rui_checkbox(label: "I agree to the terms", name: "terms", color: :primary) %>
<%= rui_checkbox(label: "Subscribe to newsletter", name: "newsletter", color: :success, checked: true) %>
<%= rui_checkbox(label: "Enable notifications", name: "notifications", color: :info) %>Checkboxes also work seamlessly with form builders:
<%= form_with model: @user do |f| %>
<%= f.rui_checkbox :terms_accepted, label: "I agree to the terms" %>
<%= f.rui_checkbox :newsletter, label: "Subscribe to updates", color: :success %>
<% end %>Next Steps
You've learned the basics! Here's where to go next: