um

Installation

Add the gem, import its styles into your Tailwind build, and import its JavaScript. The helpers are mixed into your views automatically.

1. Add the gem

bundle add unmagic-components

2. Import the styles

The components are styled with Tailwind CSS v4, which your app needs. With tailwindcss-rails, import the gem's styles after Tailwind in app/assets/tailwind/application.css: 

@import "tailwindcss";
@import "../builds/tailwind/unmagic_components";

tailwindcss-rails writes that entry file on every build. With the Tailwind CLI or an npm build, import app/assets/tailwind/unmagic_components/engine.css from the gem's install path (bundle show unmagic-components) instead.

3. Import the JavaScript

With importmap-rails the engine pins every component. Import them all, or only the ones a page uses: 

import "unmagic/components"

// or one at a time
import "unmagic/components/menu"

4. Use the form builder

Pass it per form, or make it the default for every form:

config.action_view.default_form_builder = Unmagic::Components::FormBuilder