Create beautiful, flexible Application & Admin UIs in pure Ruby

Matestack UI ships styled UI components and smart CRUD tools for maximum productivity


How about putting together prebuilt styled components in pure Ruby rather than configuring something like ActiveAdmin? You can reuse existing security policies and unique business logic while rapidly implementing beautiful admin or application UIs!

Just like Matestack's core library matestack-ui-core, the addon library matestack-ui 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!

Live Preview

Below you find a link to a dummy application built with matestack-ui. Heads up: That's an early release under heavy development!

Matestack UI provides extra value on top of our open source project and is available for 990€/year. You will get a key which can be used in your Gemfile in order to install the gem. It is not billed per project or developer.

Progressive integration


Just like matestack-ui-core, easily integrate matestack-ui 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.

Reactive forms in no time


Matestack's core library already ships reactive forms, used with pure Ruby. Within matestack-ui 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 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::Apps::AdminTemplate

  # 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 sidebar_top_partial
    div class: "text-center" do
      transition path: root_path, delay: 300 do
        heading size: 4, text: "Your Rails Backend"
      end
    end
    div class: "text-center my-5" do
      avatar img_path: asset_pack_url('media/images/avatar-placeholder.png')
      div class: "my-3" do
        plain current_admin.email
      end
    end
  end

  def sidebar_navigation_items
    [
      { type: :transition, path: dummy_dashboard_path, text: "Dashboard", icon: "columns-gap" },
      { type: :transition, path: dummy_products_path, text: "Products", icon: "box" },
      { type: :transition, path: dummy_customers_path, text: "Customers", icon: "people-fill" },
      { type: :transition, path: dummy_orders_path, text: "Orders", icon: "cart-check-fill"},
    ]
  end

  def toasts
    [
      { show_on: "failure", class: "bg-danger text-white", body: "Error!" },
      { show_on: "success", class: "bg-primary text-white", body: "Success!" },
    ]
  end

end

All Bootstrap components, available in pure Ruby


Alongside smart components, matestack-ui 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

Matestack UI Core

Matestack UI Core ships all you need to build reactive UIs in pure Ruby. You have to take care of styling and additional UI components yourself.

  • UI components in pure Ruby
  • Reactive components in pure Ruby
  • Reactive apps in pure Ruby
  • Growing documentation and Youtube Screencasts
  • Community support
Matestack UI Addon

Matestack UI ships all you need to build beautiful, reactive UIs in pure Ruby and smart CRUD components. Don't think about styling anymore and just create admin or application UIs faster than ever before!

  • Everything included in Matestack UI Core, plus:
  • Admin and application UI templates in pure Ruby
  • Admin and application UI components in pure Ruby
  • Styled, reactive forms in pure Ruby
  • Styled, reactive date/timepicker in pure Ruby
  • Styled, reactive collections in pure Ruby
  • Styled, reactive charts in pure Ruby
  • All Bootstrap v5 components available in pure Ruby
  • Growing library of additional components (Kanban Board, Devise Components...)
  • Priorized Support via private Discord channel
Onboarding Service

You'd like to start using Matestack UI in your business, but need help to get things going and bring your team up to speed? We're there for you!

  • Personal workshop for your team
  • Migrate existing apps to Matestack UI including team onboarding
  • Pair programming with your team
Custom Component Development

You need a component which is not available yet? Matestack can be extended without limitation. We create the missing component for you on a discounted price, if we're allowed to provide the new component to all Matestack users.

  • Requirements engineering
  • Component development
  • Testing and documentation
  • Deploy