Getting started

Add Wabi to a Rails 8 app (created with --css tailwind) in a few steps.

1. Install the gem

bundle add wabi

bin/rails g phlex:install

Creates the Components:: and Views:: namespaces Wabi components autoload under. Skip if your app already uses phlex-rails.

bin/rails g wabi:install

Copies the default tokens.css, the theme controller, and initializes config/wabi.lock.json.

In app/assets/tailwind/application.css, import the tokens AFTER tailwindcss:

@import "tailwindcss";
@import "./wabi/tokens.css";

Use stylesheet_link_tag "tailwind" (not "application") so the compiled output is what loads.

On your <html> tag so Wabi can read/write data-theme and data-mode for theme + dark-mode switching:

html(data: { controller: "wabi--theme" }) do
  # ...
end

bin/rails g wabi:add button dialog card

Interactive components print the Zag.js pin lines to paste into config/importmap.rb — follow the generator output, then restart the server.

Components autoload under Components::UI::* (Phlex 2.x convention). Render them anywhere:

render Components::UI::Button.new(appearance: :primary) { "Click me" }