Importmap

Add the gem

Add the UI gem to your Gemfile:

gem "fernandes-ui"

Install dependencies

Run bundle install:

bundle install

Configure Importmap

Add the UI pins to your config/importmap.rb:

pin "ui", to: "ui.esm.js", preload: true
pin_all_from "ui/controllers", under: "ui/controllers"

Register Stimulus controllers

Register the UI controllers in your JavaScript entry point:

import { registerControllers } from "ui"
registerControllers(application)

Install animations

Download the tw-animate.css file and place it in your stylesheets folder:

curl -o app/assets/stylesheets/tw-animate.css \
  https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/main/src/tw-animate.css

Then import it in your stylesheet:

@import "./tw-animate.css";

Configure Tailwind CSS

Configure your Tailwind stylesheet:

@import "tailwindcss";
@import "ui/application.css";

@source "../../../.bundle/ruby/*/gems/fernandes-ui-*/app/**/*.{erb,rb,js}";

Start using components

You can now start using UI components in your views:

<%= render "ui/button" do %>
  Click me
<% end %>