Introducing RailsbootUI: Rails View Components for Bootstrap

We're super excited to announce the release of RailsbootUI, our take on a complete view component system for Rails. It brings the full power and flexibility of Bootstrap components right into your Rails environment. With RailsbootUI, integrating Bootstrap into your Rails applications has never been easier and should save you a lot of development time. No need to look enviously at all the Javascript UI component systems anymore!

What is RailsbootUI?

In short, RailsbootUI is designed to streamline the process of using Bootstrap components in your Rails applications. Think of it as a pre-built implementation of a design system in Bootstrap - but uniquely for Rails.

For this, RailsbootUI provides a comprehensive set of pre-built, customizable view components. Under the hood, it uses GitHub's excellent ViewComponent system and provides free and professional components - ButtonComponent, AccordionComponent, ProgressComponent, etc. - everything a modern application needs for consistent styling. The components eliminate the need for manual HTML and CSS coding for Bootstrap elements in Rails. This means you can focus more on building functionality and less on mastering the complexities of UI design.

RailsbootUI comes with both free and paid components. The free components basically map to the existing Bootstrap components, while the pro components are usually sets of our own production-proven components that we found missing in the Bootstrap world.

Here's what you get

Having worked on various applications and client needs over the last years, we found that having a design system translated into components is the best way to feel the Rails advantages (speed, consistency, dev-experience, etc.) not only in the backend but in the frontend world as well. Implementing systems like RailsbootUI in our daily work has been a real game changer. It makes the one framework philosophy of Rails more clear than ever. Every developer can work on a feature from start to finish, without being blocked by some frontend hurdle in terms of design or consistency. In marketing speech, this means:

1. Easy integration: RailsbootUI is designed to integrate seamlessly with your existing Rails application. Whether you're starting a new project or adding it to an existing one, you'll find the setup process quick and easy.
2. Extensive component library: RailsbootUI includes a wide range of bootstrap components, from basic elements like buttons and forms to complex components like modals and carousels. Each component is designed to be fully customizable to your specific needs.
3. Responsive Design: Built on the robust frameworks of Bootstrap and View Components, RailsbootUI components look great on any device, whether it's a desktop, tablet, or smartphone.
4. Consistency and Reusability: By using RailsbootUI's components, you can ensure a consistent look and feel across your entire application. Reusable components mean less code duplication and easier maintenance.
5. Customization Options: While RailsbootUI components are ready to use out of the box, they are also highly customizable. You can easily adjust the styling and behavior of components to match your application's unique design requirements. It’s still Bootstrap under the hood, so it boils down do Saas variable changes.
6. Leverage View Components: By using the underlying view_components gem from GitHub, you get a reliable and maintained framework you can built upon. Tweak, change or just copy any of our components and it should work in your Rails app.

Getting Started

Getting started with RailsbootUI is simple. Ensure you have a proper setup of bootstrap and the gem view_component installed in your Railsapp. After that you just simply download zip files of our components and copy & paste them into your app. After doing so you can call a component of your choice, for example:

<%= render Railsboot::BreadcrumbComponent.new do |breadcrumb| %>
  <% breadcrumb.with_item(text: "Item 1", path: "/item/1") %>
  <% breadcrumb.with_item(text: "Item 2", path: "/item/2") %>
  <% breadcrumb.with_item(text: "Item 3", path: "/item/3", active: true) %>
<% end %>

The HTML-Representation would look like this:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Item 1</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Item 2</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Item 3
    </li>
  </ol>
</nav>

If you want to explore our professional components, you can sign up for an account and purchase either a personal or team license. All licenses are one-time purchases, so you get all future components and improvements for free! All our components are copy & paste offerings, so you can twak and adjust all of them jsut as you need.

What’s more to come?

We are of course continuously improving our components. New components, improvments etc. are happening in the background. Feel free to contact us at [e-mail] if you have the need for any special custom component or have any other feedback.

We would like to see a similar selection of professional UI components in Rails that you might know and love from the Javascript world. The front end of Rails is still underrepresented when it comes to building fast and low-maintenance web applications. Hotwire & Co. have laid the foundation for you to build excellent end-to-end applications with Rails and a solid design system without having to resort to React & Co. RailsbootUI should be a contribution to this. We also have other ideas in mind, so expect more to come!

So head on over to RailsbootUI and start exploring our components!