How I Built a Phlex Component Using RubyUI

#webdev #ruby #rails #phlex

After the announcement of RubyUI and the idea of writing views 100% in Ruby, I decided to put my (still limited) knowledge of view componentization into practice.

My goal was to create a simple and reusable Section Header component to use in my app, like in the example below:

Below, I’ll walk you through the step-by-step process, using ready-made components from RubyUI and a bit of TailwindCSS for styling.

1. Building the Component Skeleton

The RubyUI component structure already existed in my project, so I created a new file called section_header.rb inside the components folder. The component inherits from a Base class, which itself inherits from Phlex::HTML—so everything here is pure Ruby, no HTML templates!

The skeleton of the component follows the Phlex rendering pattern:

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize()
      # put the params here
    end

    def view_template
      # build your page here
    end
  end
end

2. Displaying the Title

The first step was to allow the component to receive a title as a parameter and display it using the Heading component from RubyUI (which is part of the Typography group).
rails g ruby_ui:component Typography

rails g ruby_ui:component Typography

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize(title: ")"
      @title = title
    end

    def view_template
      Heading(level: 2) { @title }
    end
  end
end

Now, I can call the component like this:

SectionHeader.new(title: "\"Users\")"

3. Adding Tailwind Styling

To make the title stand out, I wrapped the Heading in a div with some TailwindCSS classes, adding a bottom border and spacing:

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize(title: ")"
      @title = title
    end

    def view_template
      div(class: "border-b border-gray-200 pb-5 mb-5") do
        Heading(level: 2) { @title }
      end
    end
  end
end

The result already works for both dark and light mode:

4. Making the Component More Flexible

Then I thought: what if I want to add an action button, like “Create New”? For that, I added two more optional parameters: href (the button link) and label (the button text). I used the RubyUI Link component to create the button, but you could swap it for a Button if you prefer.

Link

rails g ruby_ui:component Link

Button

rails g ruby_ui:component Button

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize(title: ", href: nil, label: nil)"
      @title = title
      @href = href
      @label = label
    end

    def view_template
      div(class: "border-b border-gray-200 pb-5 mb-5") do
        div(class: "sm:flex sm:items-center sm:justify-between ml-3") do
          Heading(level: 2) { @title }
          if @href
            div(class: "mt-3 sm:mt-0 sm:ml-4") do
              Link(href: @href, variant: :primary, size: :lg) { @label }
            end
          end
        end
      end
    end
  end
end

Agora, para exibir o título com um botão de ação, basta chamar assim:

SectionHeader.new(
  title: "'Usuários',"
  href: new_admin_user_path,
  label: 'Criar Usuário'
)

The final result looks like this:

Extra Tips

You can improve the component to accept an I18n translation key instead of a plain string for the title, making internationalization easier.
You can use the same pattern for other types of headers, just by changing the internal components.

With this, it’s super easy to create beautiful, standardized section headers using only Ruby and RubyUI components. If you want to see more examples, I recommend checking out the official RubyUI documentation.
If you have any questions or want to chat, just leave a comment!