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.

Then give the page itself the colours the components expect. In dark mode the components turn dark, but the page behind them stays white unless something says otherwise. Put UnmagicPage on your layout's <html> tag: 

<html lang="en" class="UnmagicPage">

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