How-To

Simple solutions for improved usage of RailsbootUI.

We've put each component into a Railsboot module namespace. We think that our components should form some kind of base UI / design system, so we encourage you to put these components into an appropriate module structure. But of course, Railsboot is probably not the name of your choice for your design system. You can name your components whatever you want. Just make sure that whenever we introduce a Railsboot:: in the code, you replace the string according to your new naming scheme.

There is an ongoing debate in the view component community on how to name a component. We follow the core documentation of View Components and suffix each component with Component. So in a Rails ERB template you'd call the badge component with render Railsboot::BadgeComponent.new { "Badge" } for example. If you are now calling a lot of components in your views, always writing the whole component rendering call can be quite tedious.

If you need easy shortcut helper methods we encourage to just put a helper module in your app. With this helper in place a call for the badge component would be as simple as railsboot_badge { "Badge" }

module RailsbootComponentHelper
  RAILSBOOT_HELPERS = {
    accordion: "Railsboot::BadgeComponent",
    alert: "Railsboot::AlertComponent",
    # ... more components here
    toast: "Railsboot::Table::ToastComponent"
  }

  RAILSBOOT_HELPERS.each do |name, component|
    define_method :"railsboot_#{name}" do |*args, **kwargs, &block|
      render component.constantize.new(*args, **kwargs), &block
    end
  end
end
      

Testing view components is one of the core benefits of using the concept of view components at all. Having trust in certain HTML fragments, which are used all over the app, should be mandatory for any larger app. That's why we included we included basic test files in your component download.

Testing is done with Rails Minitest approach. If your are an Rspec user we encourage do use services like ChatGPT to convert the test files to Rspec.

We also provide a Rails application template to help you integrate our free components into your application.

Before using this template, ensure you have:

• A running Rails application >= 7.0
• Bootstrap already integrated into your application 5.3.x

How to use the template:
Open your terminal, navigate to your Rails application directory, and run the following command. It will lead you step by step.

rails app:template LOCATION="https://railsbootui.com/templates/free"