um

unmagic-components for Rails

Server-rendered UI components for Rails views, in the spirit of form_for: describe the columns, the fields or the tabs, and get the chrome. Styled with Tailwind CSS v4, with behaviour from plain custom elements and no Stimulus.

Installation Browse the components

Turbo

Turbo Stream actions

turbo_stream.toast and turbo_stream.stream_markdown, and an upsert action that merges append and replace.

Modal forms

One shared modal any link can load a form into, and a responder that saves and repaints the page once.

Flash messages

Your controllers' flash, shown as toasts, with no change to how you set it.

Confirm dialogs

data-turbo-confirm, answered by a dialog in the components' own chrome instead of window.confirm.

Optimistic updates

Draw what a form submitted before the server answers, then let the server's element take its place.

Forms and settings

Form builder

Labels, hints, errors and styled controls from form_with, and a submit button that says what it's doing.

Configuration

The seams the components render through, for an app with its own empty states, pager or styles.

CSS

How the CSS works

One Tailwind source file your own build compiles, in the components layer, coloured from your palette.

Class names

BEM with a PascalCase block, every class prefixed, and state read from ARIA and data attributes.

Colours and variables

The theme variables the styles read from yours, and the few --unmagic- variables of their own.

Using the styles

The classes and helpers meant for your own markup: buttons, form controls, prose, knobs and variants.

Small screens and access

What the CSS does for touch, phones, reduced motion, forced colours and keyboard focus.