Create beautiful and flexible Admin UIs in pure Ruby
Matestack UI Bootstrap ships styled UI components and smart CRUD tools for maximum productivity
Rather than configuring something like ActiveAdmin, why not plugging prebuilt components together being able to properly implement unique admin workflows and reuse existing security policies?
Just like Matestack's core library, the addon library matestack-ui-bootstrap can be seamlessly integrated on top of existing controllers, models, routes and authentication/authorisation policies. Use solid UI abstraction while not compromising on the flexibility you need to drive your business!
Progressive integration
Just like matestack-ui-core, easily integrate matestack-ui-bootstrap into existing Rails projects. Integrate bootstrap components step by step.
Flexible abstraction
Unlike other admin UI gems, you can use solid abstraction while still being able to implement and reuse your business logic without being bound to a configuration-only approach!
Tailor to your usecase
Besides styling customizations, you are completely free to integrate the components into your individual workflows, security polcies and data structures.
All Bootstrap components, available in pure Ruby
Alongside smart components, matestack-ui-bootstrap ships all Bootstrap components enabling you to use them in pure Ruby.
Imagine adding a Bootstrap card component within one line of Ruby while still beeing able to use all core components, Bootstrap's utility classes or custom CSS. That means you're able to use Bootstrap components with a high level of abstraction for maximum productivity right next to core components like 'div' with a lower level of abstraction for maximum flexibility!
On top of that, you're able to use all kinds of methods in order to render your UI based on conditions like 'current_user.is_super_admin?' for example. Adjusting the UI to your custom rules based on pure Ruby is super easy. That's what we call 'flexible abstraction'!
app/matestack/my_admin/pages/dashboard.rb
class MyAdmin::Pages::Dashboard < Matestack::Ui::Page
def response
container do
row do
Person.all.each do |person|
col sm: 4, class: "mt-3" do
card_for(person)
end
end
end
end
end
def card_for person
card title: person.name, img_path: asset_pack_url('.../xyz.png'), class: "shadow-sm" do
card_body_for(person)
end
end
def card_body_for person
div class: "px-3 pb-3" do
small do
b text: "Email:"
plain person.email
end
br
if current_user.is_super_admin?
transition path: form_path(id: person.id) do
btn size: :sm, text: "edit", class: "mt-3"
end
end
end
end
end
Reactive forms in no time
Matestack's core library already ships reactive forms, used with pure Ruby. Within matestack-ui-bootstrap you get styled form component, enabling you to create beautiful, reactive forms with a few lines of Ruby!
Create styled forms, with reactive error/success rendering without thinking of any implementation detail!
app/matestack/my_admin/components/users_form.rb
class MyAdmin::Components::UsersForm < Matestack::Ui::Component
requires :user
def response
form form_config do
bootstrap_input key: :name, type: :text, label: "Name"
bootstrap_input key: :avatar, type: :file, label: "Avatar"
bootstrap_select key: :role, options: [:client, :admin], label: "Role",
placeholder: "Select Role"
bootstrap_switch key: :active, label: "Active?"
bootstrap_submit button_variant: :primary, spinner_variant: :light, text: "Submit"
end
end
def form_config
{
multipart: true, # due to file upload
for: user,
path: admin_user_path(user.id),
method: :put,
success: {
emit: :success
},
failure: {
emit: :failure
}
}
end
end
Smart collections, a few lines of Ruby away
Implementing a paginated, filterable and orderable collection is exhausting. And what about a reactive collection? You don't want to build that yourself! That's why we've created the collection component, shipped within matestack-ui-core. The smart collection shipped with matestack-ui-bootstrap gives you even more:
A few lines of Ruby is enough to add a styled, reactive paginated collection with filters to your UI!
app/matestack/my_admin/components/users_collection.rb
class MyAdmin::Components::UsersCollection < Matestack::Ui::Component
def response
smart_table table_config
end
def table_config
{
base_query: User.all, # ActiveRecord query, could be something different than .all
columns: [ :name, :email, :age ], # which columns should be shown?
paginate: 5, # optional: how many items should be shown per page?
filters: filters, # optional: which filters should appear?
row_actions: row_actions # optional: what actions should be possible per row?
}
end
def filters
[
{
column: :name,
type: :input,
match: :like,
placeholder: "Search by name"
}
]
end
def row_actions
[
{
type: :action,
icon: "trash2",
btn_variant: :danger,
method: :delete,
path: :admin_user_path,
params: { id: :id },
confirm: true
},
#...
]
end
end
Flexible, prebuilt layouts
Use our prebuilt templates through class inheritance in order to quickly setup typical layouts including sidebar and header navigation. Styles can be customized via SCSS theming.
Thanks to the fact that you're dealing with pure Ruby classes, it's also pretty easy to modify prebuilt UI structures and appearance in order to tailor the admin app to your individual needs.
app/matestack/my_admin/app.rb
class MyAdmin::App < Matestack::Ui::Bootstrap::LayoutWithSidebar
# the response method is defined by the parent class
# you just need to pass in some configuration using the methods below
# it's still possible to overwrite and adjust the response
# defined in the parent class
def logo_path
"path/to/custom/logo.png"
end
def header_navigation_items
[
{ type: :transition, path: link_1_path, text: "Link 1" },
{ type: :transition, path: link_2_path, text: "Link 2" },
{ type: :link, path: some_external_path, text: "Link 3", variant: :primary }
]
end
def sidebar_navigation_header_text
"Sidebar Heading"
end
def sidebar_navigation_items
[
{ type: :transition, path: link_4_path, text: "Link 4", icon: "some-icon-key" },
{ type: :transition, path: link_5_path, text: "Link 5", icon: "some-icon-key" },
#...
]
end
end
