Announcing Flowbite Components for Rails

We‘re open sourcing our Flowbite component library, a set of view components, we’re using in Front Lobby, Skrift, and a bunch of other projects, both internal and external.

These days there’s no shortage of UI kits for Rails. It seems everybody is building their own design system and selling a component library on top of it. We aren’t that ambitious; we just want a gem we can include in all our projects and be off to the races, preferably open source so we don’t have to bother with private gems.

Enter flowbite-components: UI components for your Rails application, built on ViewComponent, Tailwind, and Flowbite, licensed under an MIT license, and ready to use today.

Forms

A major driver for building flowbite-components was input fields.

A complete input field isn’t just the input itself, but also its label, its error messages, and helper text. They have a bunch of states they can be in, like are there errors or is the control disabled, and they come in a multitude of types - all of which benefit from all of the above.

Rails’ form helpers provide some building blocks for this, but we wanted a fully fledged experience we could bring along across projects, and still be sure that both the user experience is great, and the developer experience isn’t restricted moving forward.

I think we’ve ended up on something that’s both flexible and expressive:

<% form_with model: @user do |form| %>
  <%= render Flowbite::InputField::Text.new(attribute: :name, form: form) %>
  <%= render Flowbite::InputField::Email.new(attribute: :email, form: form) %>
  <%= render Flowbite::Button.new(type: :submit, content: "Save") %>
<% end %>

And of course, if you don’t want to just use the defaults for a field, you have options for customizing each element of the input field:

  <%= render Flowbite::InputField::Text.new(
    attribute: :name,
    form: form,
    label: {content: "Full Name", class: "text-2xl"},
    hint: {content: "Enter your full name"}
  ) %>

Getting started

Flowbite Components is available now on RubyGems and GitHub, and the documentation is online.

Do check out the installation instructions, which unfortunately aren’t as simple as I’d like them to, at this point.

Why Flowbite?

There are many UI/design kits out there, so why Flowbite?

Flowbite has a bunch of things going for it.

Outside of that, I like the look and feel. Their semantic classes and easy themability just reinforces the choice.

It’s a work in progress

Today, we’re officially releasing v0.2. Why not v1? We’re still polishing and tweaking the API, so I am reluctant to commit to a v1 just yet.

Also, we’re really far behind the full set of components. I mean, we only have 9 so far, which doesn’t really warrant a v1.

The future

Will we ever support all the components that Flowbite has designed? I honestly doubt it. For now we’re extracting components from our existing application, and implementing new ones as we need them. If we never need a, say, KBD component, we’ll likely never see one.

That said, not all components need to live in a component library. KBD is a good example of this; it’s effectively a single div with a list of CSS class names. I am not sure exactly how much value is added by creating a Flowbite::KBD component for this.

Another thing I’d love to investigate is a form builder, perhaps similar to Simple Form. Being able to say

<% form_with model: @user, builder: Flowbite::Form do |f| %>
  <%= f.input :name %>
  <%= f.input :address %>
  <%= f.submit %>
<% end %>

and still get the full Flowbite experience would be pretty cool.