UI components for fast prototyping in Rails applications.
Preview is available at ui.k0va1.dev
Add this line to your application's Gemfile:
gem "propshaft"
gem "lightning_ui_kit"And then execute:
$ bundleAdd the following lines to your application.html.erb file:
<%= stylesheet_link_tag "lightning_ui_kit" %>
<%= javascript_include_tag "lightning_ui_kit" %>Use the lui helper to render components:
<%= lui.button { "Click me" } %>
<%= lui.button(style: :outline) { "Cancel" } %>
<%= lui.button(style: :destructive, size: :small) { "Delete" } %>
<%= lui.button(icon: "plus") { "Add Item" } %>
<%= lui.button(size: :small, icon: "pencil") { "Edit" } %><%= lui.input(name: :email, type: :email, label: "Email") %>
<%= lui.textarea(name: :bio, label: "Biography", rows: 4) %>
<%= lui.select(name: :country, label: "Country", options: [["US", "us"], ["UK", "uk"]]) %>
<%= lui.checkbox(name: :terms, label: "Accept terms") %>
<%= lui.switch(name: :notifications, label: "Enable notifications") %><%= form_with model: @user do |form| %>
<%= lui.input(name: :email, type: :email, label: "Email", form: form) %>
<%= lui.textarea(name: :bio, label: "Biography", form: form) %>
<%= lui.button(type: :submit) { "Save" } %>
<% end %><%= lui.modal(id: "confirm", title: "Confirm Action") do |modal| %>
<% modal.with_body do %>
<p>Are you sure you want to proceed?</p>
<% end %>
<% modal.with_action do %>
<%= lui.button(style: :outline) { "Cancel" } %>
<% end %>
<% modal.with_action do %>
<%= lui.button { "Confirm" } %>
<% end %>
<% end %>
<%= lui.table(data: @users) do |table| %>
<% table.with_column("Name") { |user| user.name } %>
<% table.with_column("Email") { |user| user.email } %>
<% table.with_action { |user| link_to "Edit", edit_user_path(user) } %>
<% end %>The table supports opt-in row selection, bulk actions, sortable columns, and clickable rows. Order the data in your controller with the whitelist-safe lui_sort helper — the table reads the current sort state from the request params automatically:
class OrdersController < ApplicationController
include LightningUiKit::Sortable
def index
@orders = lui_sort(Order.all, allowed: %w[number total], default: :number)
end
end<%= form_with url: bulk_orders_path, method: :post do %>
<%= lui.table(
data: @orders,
selectable: true,
row_url: ->(order) { order_path(order) },
sort_key: :number
) do |table| %>
<% table.with_bulk_actions do %>
<%= lui.button(style: :outline, size: :small, type: :submit) { "Archive" } %>
<% end %>
<% table.with_column("Order", sort_key: :number) { |order| order.number } %>
<% table.with_column("Total", sort_key: :total, align: :right) { |order| order.total } %>
<% end %>
<% end %>Form: button, input, input_otp, textarea, select, checkbox, switch, radio_group, combobox, file_input, dropzone, slider, toggle, toggle_group, calendar, date_picker
Display: text, badge, avatar, alert, banner, toast, skeleton, spinner, progress, chart
Structure: card, separator, aspect_ratio, breadcrumb, collapsible, popover, hover_card, sheet, scroll_area, resizable, carousel, tabs, accordion, table (with optional selection, bulk actions, sortable columns), pagination, description_list, dropdown, context_menu, command, navigation_menu, menubar, modal, tooltip, layout (frosted glass sidebar with backdrop blur), auth_layout (centered layout for sign in/sign up pages), sidebar_section, sidebar_link, link
You can also use the standard ViewComponent render syntax:
<%= render LightningUiKit::ButtonComponent.new { "Click me" } %>LightningUiKit supports theming via CSS custom properties. All components use semantic design tokens instead of hardcoded colors.
- Light (default) — applied automatically
- Dark — add
class="lui-theme-dark"to a container element
<body class="lui-theme-dark">
<%= lui.button { "Dark themed" } %>
</body>Override --lui-theme-* CSS variables to create your own theme:
.my-brand-theme {
--lui-theme-surface: oklch(0.98 0.01 250);
--lui-theme-foreground: oklch(0.2 0.02 250);
--lui-theme-interactive: oklch(0.6 0.2 250);
/* See themes.css for all available tokens */
}Full token definitions are in app/assets/stylesheets/lightning_ui_kit/themes.css.
Bug reports and pull requests are welcome
The gem is available as open source under the terms of the MIT License.