Node

Add the gem

Add the UI gem to your Gemfile:

gem "fernandes-ui"

Install Ruby dependencies

Run bundle install:

bundle install

Install npm package

Install the UI JavaScript package:

bun add @fernandes/ui
# or
npm install @fernandes/ui

Register Stimulus controllers

Import and register UI controllers in your JavaScript entry point:

import { Application } from "@hotwired/stimulus"
import * as UI from "@fernandes/ui"

const application = Application.start()
UI.registerControllers(application)

Install animations

Install the tw-animate-css package for component animations:

bun add -D tw-animate-css
# or
npm install -D tw-animate-css

Then import it in your stylesheet:

@import "tw-animate-css";

Configure Tailwind CSS

Run the provided generators to configure styles:

rails generate ui:css
rails generate ui:install

These commands automatically configure and import engine styles into your stylesheet pipeline.

Start using components

You can now start using UI components in your views:

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